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>