domingo, 1 de marzo de 2009

Centrar mapa y ajustar zoom Google Maps

Para centrar el mapa y ajustar el zoom de forma dinámica con la api de google maps, debemos utilizar el objeto GLatLngBounds.
En el ejemplo creamos 3 marcadores y añadimos una ventana html a cada uno, con el título.
Con bounds.extend(latlng) lo que hacemos es ampliar el mapa para que incluya el punto.
Según la documentación:

Amplía este rectángulo de modo que contenga el punto proporcionado. En sentido longitudinal, se amplía en la dirección más pequeña de las dos posibles. Si son iguales, se amplía en el límite este.


if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(38.34741700000001,-0.48521199999999), 13);
var bounds = new GLatLngBounds();

var p0 = new GLatLng(38.34741700000001,-0.48521199999999);
var m0 = new GMarker(p0);
bounds.extend(m0.getPoint());
var html0 = '<div><h4>El Foc Alacant</h4></div>';
GEvent.addListener(m0,'click', function(){
m0.openInfoWindowHtml(html0);
});
map.addOverlay(m0);

var p3 = new GLatLng(38.53535099999999,-0.13092299999999568);
var m3 = new GMarker(p3);
bounds.extend(m3.getPoint());
var html3 = '<div><h4>La Cava Aragonesa</h4></div>';
GEvent.addListener(m3,'click', function(){
m3.openInfoWindowHtml(html3);
});
map.addOverlay(m3);

var p4 = new GLatLng(38.344663999999995,-0.48466999999999416);
var m4 = new GMarker(p4);
bounds.extend(m4.getPoint());
var html4 = '<div><h4>Restaurante Ibéricos</h4></div>';
GEvent.addListener(m4,'click', function(){
m4.openInfoWindowHtml(html4);
});
map.addOverlay(m4);

//Ajustar el zoom según los límites
map.setZoom(map.getBoundsZoomLevel(bounds));

//Centrar el mapa de acuerdo a los límites
map.setCenter(bounds.getCenter());
}


2 comentarios:

  1. Muchas gracias, me ha sido de mucha utilidad tu articulo

    Slds. Daniel

    ResponderEliminar
  2. muxas gracias, me ha servido de mucha ayuda en el trabajo

    ResponderEliminar