Autor
|
Tema: Google Maps API v3 Markes e InfoWindows (Leído 7,832 veces)
|
[u]nsigned
Desconectado
Mensajes: 2.397
JS/Node developer
|
Hola, estoy implementando Google Maps API v3 en mi sitio. En un pagina cargo un archivo JSON (generado dinamicamente con PHP) que tiene la siguiente estructura: { cantidad: 2, lugares: { 1: { id_lugar: "1", nombre_lugar: "Municipalidad de Rawson", latitude: "-43.2999997", longitude: "-65.1052474", icono: "gov" }, 2: { id_lugar: "4", nombre_lugar: "Honorable Legislatura de la Provincia del Chubut", latitude: "-43.297535", longitude: "-65.10604269999999", icono: "gov" } } } El codigo JS (jQuery) es este: $.getJSON( 'ajax.php?action=list&categoria=gov', function(json){ for(var i=1; i<=json.cantidad; i++) { var marker = new google.maps.Marker({ position:new google.maps.LatLng(json['lugares'][i]['latitude'], json['lugares'][i]['longitude']), map:map, title:json['lugares'][i]['nombre_lugar'] }); var infowindow = new google.maps.InfoWindow({ content:json['lugares'][i]['nombre_lugar'] }); Marcadores[i] = marker; Informacion[i] = infowindow; google.maps.event.addListener(Marcadores[i] , "click", function(){//# Informacion[i].open(map,Marcadores[i] ); });//# } } );
Pero no me funciona, al parecer no me genera el listener del evento click sobre cada uno de los marcadores para abrir el correspondiente InfoWindow. El caso es que si comento las lineas indicadas con //#, para que los IW se abran automaticamente sin darle click al marcador si funciona, pero lo que yo quiero es que esten ocultos y mostrarlos cuando se hace click. Alguna sugerencia? PD: Tanto el array Marcadores como Informacion estan incializados como arrays vacios globales al principio del script
|
|
« Última modificación: 17 Enero 2012, 21:44 pm por El As del Club Paris »
|
En línea
|
No hay atajo ante la duda, el misterio se hace aquí... Se hace carne en cada uno, el misterio es existir!
|
|
|
Shell Root
|
Wii alguien interesando en el API de GoogleMaps , intentad con lo siguiente, var structMap = { cantidad: 2, lugares: { 1: { id_lugar: "1", nombre_lugar: "Acuaparque Ditaires", latitude: "6.169312989325159", longitude: "-75.63074111938477", icono: "gov" }, 2: { id_lugar: "4", nombre_lugar: "Triana", latitude: "6.169312989325159", longitude: "-75.64567565917969", icono: "gov" } } } function initMap() { // Posición inicial var latlng = new google.maps.LatLng( structMap['lugares'][1]['latitude'], structMap['lugares'][1]['longitude'] ); // Opciones del mapa var myOptions = { zoom : 15, center : latlng, mapTypeId : google.maps.MapTypeId.ROADMAP }; // Mapa var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions ); for(var i=1; i<=structMap.cantidad; i++){ // Agregar marcador var marker = new google.maps.Marker({ position : new google.maps.LatLng( structMap['lugares'][i]['latitude'], structMap['lugares'][i]['longitude'] ), map : map, title : structMap['lugares'][i]['nombre_lugar'] }); // Agregar ventana de información con evento mostrarMensaje( marker, structMap['lugares'][i]['nombre_lugar'] ); } function mostrarMensaje(marker, msg) { // Crear ventana de información. var infowindow = new google.maps.InfoWindow({ content : msg }); // Crear evento para mostrar la ventana al dar click google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map, marker); }); } }
Resultado,
|
|
« Última modificación: 18 Enero 2012, 06:33 am por Shell Root »
|
En línea
|
Te vendería mi talento por poder dormir tranquilo.
|
|
|
[u]nsigned
Desconectado
Mensajes: 2.397
JS/Node developer
|
Muchisimas gracias, funciona a la perfeccion!
|
|
|
En línea
|
No hay atajo ante la duda, el misterio se hace aquí... Se hace carne en cada uno, el misterio es existir!
|
|
|
Sandala
Desconectado
Mensajes: 2
|
Hola, Hola.. Hay alguien que pueda ayudarme por favor ?
|
|
|
En línea
|
|
|
|
|
|