API de Google Map v3: establezca límites y centro
Recientemente cambié a Google Maps API V3. Estoy trabajando en un ejemplo simple que traza marcadores a partir de una matriz, sin embargo, no sé cómo centrar y hacer zoom automáticamente con respecto a los marcadores.
He buscado por todas partes en la red, incluida la propia documentación de Google, pero no he encontrado una respuesta clara. Sé que podría simplemente tomar un promedio de las coordenadas, pero ¿cómo configuraría el zoom en consecuencia?
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
setMarkers(map, beaches);
}
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.423036, 151.259052, 5],
['Cronulla Beach', -34.028249, 121.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.450198, 151.259302, 1]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var lat = map.getCenter().lat();
var lng = map.getCenter().lng();
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
Sí, puedes declarar tu nuevo objeto de límites.
var bounds = new google.maps.LatLngBounds();
Luego, para cada marcador, extiende tu objeto de límites:
bounds.extend(myLatLng);
map.fitBounds(bounds);
API: google.maps.LatLngBounds
Tengo todo ordenado - vea las últimas líneas para el código - ( bounds.extend(myLatLng); map.fitBounds(bounds);
)
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 161.259052, 5],
['Cronulla Beach', -36.028249, 153.157507, 3],
['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
['Maroubra Beach', -33.950198, 151.159302, 1]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
bounds.extend(myLatLng);
}
map.fitBounds(bounds);
}
Las respuestas son perfectas para ajustar los límites del mapa para los marcadores, pero si desea ampliar los límites de Google Maps para formas como polígonos y círculos, puede utilizar los siguientes códigos:
Para círculos
bounds.union(circle.getBounds());
Para polígonos
polygon.getPaths().forEach(function(path, index)
{
var points = path.getArray();
for(var p in points) bounds.extend(points[p]);
});
Para rectángulos
bounds.union(overlay.getBounds());
Para polilíneas
var path = polyline.getPath();
var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();
for(var i = 1; i < path.getLength(); i++)
{
var e = path.getAt(i);
slat = ((slat < e.lat()) ? slat : e.lat());
blat = ((blat > e.lat()) ? blat : e.lat());
slng = ((slng < e.lng()) ? slng : e.lng());
blng = ((blng > e.lng()) ? blng : e.lng());
}
bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));
Mi sugerencia para la API v3 de Google Maps sería (no creo que se pueda hacer de manera más eficiente):
gmap : {
fitBounds: function(bounds, mapId)
{
//incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
if (bounds==null) return false;
maps[mapId].fitBounds(bounds);
}
}
En el resultado, ajustará todos los puntos dentro de los límites en la ventana de su mapa.
El ejemplo funciona perfectamente y puedes comprobarlo libremente aquí www.zemelapis.lt