javascript - Asignar ventana de información para cada marcador en Google Maps
Tengo un problema con respecto a la asignación de una ventana de información a cada marcador en mi mapa.
Código 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);
});
El problema es que mi manejador de clics mostrará el mismo "id" para cada marcador (el id que se muestra es el id de mi ÚLTIMO registro en mi base de datos). ¿Hay alguna manera de mostrar cada ventana de información para cada marcador?
Respuesta #1
Suponiendo que su arreglo de ubicación se obtiene y se llena desde la base de datos...
Primero que nada tienes un error:
var pos=new google.maps.LatLng(ubicación[i[3],ubicación[i][4]);
deberías arreglar tus corchetes y ponerlo de esta manera:
var pos=new google.maps.LatLng(ubicación[ i ][3], ubicación[ i ][4]);
Aquí hay un ejemplo:
Intenté seguir tu ejemplo tanto como pude ya que no especificaste un arreglo y creé uno que corresponde a tu arreglo (puedes agregar una columna más si quieres para tus nombres)
Bucle:
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));
}
Declara tu infoWindow antes del bucle y extráelo dentro de tu evento
Ventana de información:
var infowindow = new google.maps.InfoWindow();
Evento de clic:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(location[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
Ejemplo completo de fiddle: http://jsfiddle.net/eugensunic/7TZFP/5/
