Google Maps API Multiple Markers with Infowindows

93

Saya mencoba menambahkan beberapa penanda, masing-masing dengan jendela masuknya sendiri yang muncul saat diklik. Saya mengalami masalah saat membuat jendela masuk, ketika saya mencobanya, itu hanya muncul satu penanda tanpa jendela masuk.

Terima kasih, beri tahu saya jika Anda memerlukan informasi lebih lanjut

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
javascript  google-maps  google-maps-api-3  google-maps-markers  infowindow 
— stacktraceyo
sumber
2
Gunakan hanya SATU jendela masuk yang dibuat sebelum penanda. Kemudian acara klik Anda untuk setiap penanda akan bekerja dengan benar. Variabel contentdi dalam event listener Anda tidak ditentukan dalam fungsi itu.
— js1568
1
Sama seperti komentar singkat, jika Anda memformat kode Anda dengan baik, itu jauh lebih mudah dibaca.
— paullb
1
@paullb Saya akan memformat ulang, saya menulis pertanyaan ini seperti 4 tahun yang lalu ketika saya lebih dari seorang pemula :)
— stacktraceyo
Periksa tutorial ini untuk menampilkan beberapa info penanda jendela dengan klik dan Hover freakyjolly.com/…
— Kode Spy

Jawaban:

206

Anda bisa menggunakan penutupan. Ubah saja kode Anda seperti ini:

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
    };
})(marker,content,infowindow));

Inilah DEMO tersebut

— Insinyur
sumber
2
Saya mendapatkan ini berfungsi tetapi bagaimana saya mengubah kode sehingga ketika saya mengklik penanda lain itu membuka jendela masuk yang menggantikan jendela masuk yang sebelumnya terbuka, alih-alih terus membuka lebih banyak jendela masuk setiap kali saya mengklik penanda lain?
— railsy
berhasil! tetapi bisakah seseorang menjelaskan kepada saya mengapa ini bekerja seperti ini?
— Lakshay
1
@Lakshay Anda dapat membaca tentang masalah serupa di sini
— Engineer
1
dalam kasus ini, bagaimana cara menutup jendela masuk saat Anda mengeklik di luar peta?
— Rohit Tigga
Bagaimana cara menutup jendela masuk? infowindow.close()tidak bekerja.
— mokiSRB
10

Berikut adalah potongan kode yang pasti akan berfungsi. Anda dapat mengunjungi tautan di bawah ini untuk bekerja jsFiddle dan penjelasan secara rinci. Cara menemukan banyak alamat di peta google dengan zoom sempurna

var infowindow = new google.maps.InfoWindow();  
google.maps.event.addListener(marker, 'mouseover', (function(marker) {  
           return function() {  
               var content = address;  
               infowindow.setContent(content);  
               infowindow.open(map, marker);  
           }  
         })(marker));
— evaipar
sumber
6

Tautan Sumber

Tautan Demo

Kode berikut akan menunjukkan Beberapa Penanda dengan InfoWindow . Anda dapat menghapus kode untuk menampilkan Info di Hover juga

masukkan deskripsi gambar di sini

            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    InforObj[0].set("marker", null);
                    InforObj[0].close();
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
— Kode Spy
sumber
Persyaratan untuk solusi ini adalah penggunaan const untuk infowindow dan marker, jika tidak, solusi ini tidak akan berfungsi ..
— Jim Jimson
2

Jika Anda juga ingin mengikat penutupan jendela masuk ke suatu acara, cobalah sesuatu seperti ini

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        windows.push(infowindow)
        google.maps.event.addListener(map,'click', function(){ 
            infowindow.close();
        }); 
    };
})(marker,content,infowindow));
— Vinayak Kaniyarakkal
sumber
0 
function setMarkers(map,locations){

for (var i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0];
 var lat = locations[i][1];
 var long = locations[i][2];
 var add =  locations[i][3];

 latlngset = new google.maps.LatLng(lat, long);

 var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
 });
 map.setCenter(marker.getPosition());


 marker.content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add;


 google.maps.events.addListener(marker,'click', function(map,marker){
          map.infowindow.setContent(marker.content);
          map.infowindow.open(map,marker);

 });

 }
}

Kemudian pindah var infowindow = new google.maps.InfoWindow()ke initialize()fungsi:

function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(33.890542, 151.274856),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);
    map.infowindow = new google.maps.InfoWindow();

    setMarkers(map,locations)

  }
— js1568
sumber
1
google.maps.events.AddListenerseharusnyagoogle.maps.event.addListener
— Patrick Yan
Saya mengerti TypeError: map.infowindow is undefinedjika saya menyertakan var infowindow = new google.maps.InfoWindow();di dalam fungsi initialize () saya
— invot
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.