Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: [u]nsigned en 17 Enero 2012, 21:40 pm


Título: Google Maps API v3 Markes e InfoWindows
Publicado por: [u]nsigned en 17 Enero 2012, 21:40 pm
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:

Código:
{
	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:

Código
  1. $.getJSON( 'ajax.php?action=list&categoria=gov', function(json){
  2.  
  3. 		for(var i=1; i<=json.cantidad; i++)
  4. 		{
  5. 			var marker = new google.maps.Marker({
  6. 				position:new google.maps.LatLng(json['lugares'][i]['latitude'], json['lugares'][i]['longitude']),
  7. 				map:map,
  8. 				title:json['lugares'][i]['nombre_lugar']
  9. 			});
  10.  
  11. 			var infowindow = new google.maps.InfoWindow({
  12. 				content:json['lugares'][i]['nombre_lugar']
  13. 			});
  14.  
  15. 			Marcadores[i] = marker;
  16. 			Informacion[i] = infowindow;
  17.  
  18. 			google.maps.event.addListener(Marcadores[i] , "click", function(){//#
  19. 				Informacion[i].open(map,Marcadores[i] );
  20. 			});//#
  21. 		}
  22.  
  23. 	} );

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?  :huh:

PD: Tanto el array Marcadores como Informacion estan incializados como arrays vacios globales al principio del script

Título: Re: Google Maps API v3 Markes e InfoWindows
Publicado por: Shell Root en 18 Enero 2012, 06:14 am
Wii alguien interesando en el API de GoogleMaps :D, intentad con lo siguiente,

Código
  1.     var structMap = {
  2.         cantidad: 2,
  3.         lugares: {
  4.             1: {
  5.                 id_lugar: "1",
  6.                 nombre_lugar: "Acuaparque Ditaires",
  7.                 latitude: "6.169312989325159",
  8.                 longitude: "-75.63074111938477",
  9.                 icono: "gov"
  10.             },
  11.             2: {
  12.                 id_lugar: "4",
  13.                 nombre_lugar: "Triana",
  14.                 latitude: "6.169312989325159",
  15.                 longitude: "-75.64567565917969",
  16.                 icono: "gov"
  17.             }
  18.         }
  19.     }
  20.  
  21.     function initMap() {
  22.         // Posición inicial
  23.         var latlng = new google.maps.LatLng( structMap['lugares'][1]['latitude'], structMap['lugares'][1]['longitude'] );
  24.  
  25.         // Opciones del mapa
  26.         var myOptions = {
  27.             zoom          : 15,
  28.             center       :  latlng,
  29.             mapTypeId : google.maps.MapTypeId.ROADMAP
  30.         };
  31.  
  32.         // Mapa
  33.         var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions );
  34.  
  35.         for(var i=1; i<=structMap.cantidad; i++){
  36.             // Agregar marcador
  37.             var marker = new google.maps.Marker({
  38.                 position : new google.maps.LatLng( structMap['lugares'][i]['latitude'], structMap['lugares'][i]['longitude'] ),
  39.                 map       : map,
  40.                 title        : structMap['lugares'][i]['nombre_lugar']
  41.             });
  42.  
  43.             // Agregar ventana de información con evento
  44.             mostrarMensaje( marker, structMap['lugares'][i]['nombre_lugar'] );
  45.         }
  46.  
  47.         function mostrarMensaje(marker, msg) {
  48.             // Crear ventana de información.
  49.             var infowindow = new google.maps.InfoWindow({
  50.                 content : msg
  51.             });
  52.  
  53.             // Crear evento para mostrar la ventana al dar click
  54.             google.maps.event.addListener(marker, 'click', function(){
  55.                 infowindow.open(map, marker);
  56.             });
  57.         }
  58.   }

Resultado,
(http://i39.tinypic.com/k49u77.png)

Título: Re: Google Maps API v3 Markes e InfoWindows
Publicado por: [u]nsigned en 27 Enero 2012, 12:58 pm
Muchisimas gracias, funciona a la perfeccion!

Título: Re: Google Maps API v3 Markes e InfoWindows
Publicado por: Sandala en 7 Abril 2016, 22:08 pm
Hola, Hola..

 :rolleyes: Hay alguien que pueda ayudarme por favor ?


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines