javascript - Przypisz okienko informacyjne dla każdego markera w Google Maps
Mam problem z przypisaniem okienka informacyjnego do każdego markera na mojej mapie.
Kod JS:
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);
});
Problem polega na tym, że mój obsługiwacz kliknięć wyświetli ten sam „id” dla każdej markery (wyświetlane id to id MOJEGO OSTATNIEGO rekordu w mojej bazie danych). Czy istnieje sposób, aby wyświetlić każdy infowindow dla każdej markery?
Odpowiedź #1
Zakładając, że Twoja tablica lokalizacja jest pobierana i wypełniana z bazy danych...
Przede wszystkim masz błąd:
var pos=new google.maps.LatLng(location[i[3],location[i][4]);
powinieneś naprawić swoje nawiasy i ustawić to w ten sposób:
var pos=new google.maps.LatLng(location[ i ][3],location[ i ][4]);
Oto przykład:
Starałem się naśladować Twój przykład tak bardzo, jak mogłem, ponieważ nie określiłeś tablicy i zrobiłeś jedną, która odpowiada Twojej tablicy (możesz dodać jeszcze jedną kolumnę, jeśli chcesz, dla swoich imion)
Pętla:
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));
}
Zadeklaruj swoje okno informacyjne przed pętlą i wyodrębnij je wewnątrz swojego zdarzenia
Okno informacyjne:
var infowindow = new google.maps.InfoWindow();
Wydarzenie kliknięcia:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(location[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
Pełny przykład fiddle: http://jsfiddle.net/eugensunic/7TZFP/5/
