Tengo un mapa con múltiples polilíneas y me gustaría abrir una línea-infowindow específico al hacer clic en la línea.Múltiples polilíneas e infowindows con Google Maps V3
Hasta ahora, mi código solo muestra el contenido de la última iteración.
Encontré dos ejemplos muy agradables de lo que quiero pero después de horas de intentarlo ya no estoy más lejos.
Ejemplo 1: http://srsz750.appspot.com/api3/polylines-multiple.html
Ejemplo 2: http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090414.xml
Así que su son mi última oportunidad: -S
Aquí está mi código que muestra sólo el contenido de la última iteración:
for (var i = 0; i < locations.length; i++) {
var route = locations[i]; // locations is an array of route-arrays.
//route is an array with details. route[0] contains the description.
var imageStart = 'img/rijder.png';
var polyOptions = {
strokeColor: '#0000FF',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions, info);
var path = poly.getPath();
//line text
var info = route[0];
google.maps.event.addListener(poly, 'click', function(event) {
infowindow.setContent(info);
infowindow.position = event.latLng;
infowindow.open(map);
});
//startmarker
var startLatLng = new google.maps.LatLng(route[1], route[2]);
var smarker = new google.maps.Marker({
position: startLatLng,
map: map,
icon: imageStart,
title: route[7],
html: route[0]
});
path.push(startLatLng);
//starttext
google.maps.event.addListener(smarker, "click", function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
//endmarker
var endLatLng = new google.maps.LatLng(route[4], route[5]);
var emarker = new google.maps.Marker({
position: endLatLng,
map: map,
icon: imageEnd,
title: route[8],
html: route[3]
});
path.push(endLatLng);
//endtext
google.maps.event.addListener(emarker, "click", function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
//close line and put on the map
poly.setMap(map);
}
}
Y aquí está el código que esperaría que funcione, pero todas las líneas desaparecieron (solo el código relevante, también agregué una función de mouseover):
//line text
google.maps.event.addListener(poly, 'click', (function(event,index){
return function(){
var routeinfw = locations[index];
var inf = routeinfw[0];
infowindow.setContent(inf);
infowindow.position = mouselocation;
infowindow.open(map);
};
})(event,i));
//starticon
su código resuelve un problema de ANCLAJE con polígonos (no se anclan bien con event.latLng - marcadores, ok). por lo tanto, posicionar explícitamente la ventana de información, a diferencia de 'infowindow.open (map, event.latLng)', es una buena solución para la interfaz de eventos del polígono con errores de google maps. –
¡me alegro de que haya ayudado! – ifaour