Vyhledávání na webu

javascript - Přiřadit informační okno ke každému markeru v Google Maps


Mám problém s přiřazováním informačního okna ke každému markeru na mé mapě.

JS kód:

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);

});

Problém je v tom, že můj handler kliknutí zobrazí stejný „id“ pro každý marker (id, které se zobrazuje, je id mého POSLEDNÍHO záznamu v databázi). Existuje způsob, jak zobrazit každé informační okno pro každý marker?

Odpověď č. 1

Předpokládáme, že vaše pole location je načteno a naplněno z databáze...

Nejprve máte chybu:

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

měli byste opravit své závorky a dát to takto:

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

Zde je příklad:

Snažil jsem se co nejvíce následovat tvůj příklad, protože jsi nespecifikoval pole a vytvořil jedno, které odpovídá tvému poli (můžeš přidat další sloupec, pokud chceš, pro svá jména)

Smyčka:

  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));
}

Deklarujte své infoWindow před smyčkou a vyjměte jej uvnitř své události

Infookno:

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

Událost kliknutí:

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

Úplný příklad fiddle: http://jsfiddle.net/eugensunic/7TZFP/5/