Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/07/2009, 00:24
alvarols
 
Fecha de Ingreso: diciembre-2008
Mensajes: 738
Antigüedad: 15 años, 5 meses
Puntos: 15
Google Maps - Burbujas en diferentes marcadores

He tratado de buscar que en el mapa de Google Maps en el que estoy trabajando, pueda poner burbujas en los diferentes marcadores, porque la intención es que el mapa sirva como guía para llegar de un punto a otro.

Los marcadores están determinados por un array y eso es lo que me dificulta, porque no se como decirle al sistema con el openinfowindowhtml que me muestre una burbuja dependiendo del valor que tengo seleccionado

A continuación el código

Código:
<script type="text/javascript" charset="utf-8">
			$(document).ready(function(){
				var map = new GMap2($("#map").get(0));
				map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());

 
				var Tecoman = new GLatLng(18.906936, -103.873672);
				map.setCenter(Tecoman, 6);
				
				// setup 10 random points
				var DF = new GLatLng (19.396658, -99.157104);
				var Gdl = new GLatLng(20.658486,-103.337402);
				var Colima = new GLatLng(19.176301,-103.732910);
				var markers=new Array();
				 markers [1] = new GMarker(DF );
				map.addOverlay(markers [1]);
			     markers [2] = new GMarker(Gdl);
				map.addOverlay(markers [2]); 
				 markers [3]= new GMarker(Colima);
				map.addOverlay(markers [3]);
				 markers [4] = new GMarker(Tecoman);
				map.addOverlay(markers [4]);
				
				var rutas=new Array();
				rutas [1] =  DF;
				rutas [2] =  Gdl;
				rutas [3] =  Colima;
				rutas [4] =  Tecoman;
				
				

				
				for (var i = 1; i < 5; i++) {
				var Point = rutas [i];
				 marker = new GMarker(rutas [i]);
				 rutas[i] = marker;
				 }
				 

				
				$(rutas).each(function(i, markers){
					$("<li />")
						.html("Ruta "+i)
						.click(function(){
							displayPoint(markers, i);
						})
						.appendTo("#list");
					
					GEvent.addListener(marker, "click", function(){
						displayPoint(marker, i);
					});
				});
			  


			
	
				$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
				
				function displayPoint(marker, index){
					$("#message").hide();
					
					var moveEnd = GEvent.addListener(map, "moveend", function(){
						var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
						$("#message")
							.fadeIn()
							.css({ top:markerOffset.y, left:markerOffset.x });
					
						GEvent.removeListener(moveEnd);
					});
					map.panTo(marker.getLatLng());
					}
				
			});
</script>