javascript - Tilldela infowindow för varje markör i Google Maps


Jag har ett problem när det gäller att tilldela informationsfönster till varje markör på min karta.

JS-kod:

for (i=0;i<location.length;i++){
    var id = location[i][0];
    var name = location [i][1];
    var pos = new google.maps.LatLng(location[i[3],location[i][4]);


    var contentString = id;
    var infowindow = new google.maps.InfoWindow({content:contentString});
    var marker= new google.maps.Marker({position: pos, map: map, title: id});

    marker.addListener('click', function() { infowindow.open(map, this);

});

Problemet är att min klickhanterare kommer att visa samma "id" för varje markör (det visade id:t är id:t för mitt SENASTE rekord i min databas). Finns det ett sätt att visa varje informationsruta för varje markör?

Svar #1

Förutsatt att din location-array hämtas och fylls från databasen...

För det första har du ett fel:

var pos=new google.maps.LatLng(location[i[3],location[i][4]);

du borde fixa dina parenteser och skriva på det här sättet:

var pos=new google.maps.LatLng(location[ i ][3],location[ i ][4]);

Här är ett exempel:

Jag försökte följa ditt exempel så mycket jag kunde eftersom du inte angav en array och gjorde en som motsvarar din array (du kan lägga till en kolumn till om du vill för dina namn)

Loop:

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

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(location[i][1], location[i][2]),
        map: map,
        title: location[i][0]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(location[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

Deklarera din infoWindow innan loopen och extrahera den inuti din händelse

Informationsfönster:

 var infowindow = new google.maps.InfoWindow();

Klickhändelse:

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
     return function() {
         infowindow.setContent(location[i][0]);
         infowindow.open(map, marker);
     }
 })(marker, i));

Fullständigt fiddle-exempel: http://jsfiddle.net/eugensunic/7TZFP/5/