Google Map API v3 - poner límites y el centro
-
21-09-2019 - |
Pregunta
He cambiado recientemente a Google Maps API V3. Estoy trabajando en un simple ejemplo que traza los marcadores de una matriz, sin embargo no sé cómo centrar y un zoom de forma automática con respecto a los marcadores.
He buscado en la red de alta y baja, incluyendo la propia documentación de Google, pero no han encontrado una respuesta clara. Sé que podría simplemente tomar un promedio de las coordenadas, pero ¿cómo iba a establecer el zoom en forma apropiada?
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]
});
}
}
Solución 2
¿Tiene todo ordenados - ver las últimas líneas de 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);
}
Otros consejos
Sí, sólo tiene que declarar su nuevo objeto límites.
var bounds = new google.maps.LatLngBounds();
A continuación, para cada marcador, ampliar su objeto límites:
bounds.extend(myLatLng);
map.fitBounds(bounds);
Mi sugerencia para Google Maps API v3 sería (no creo que se puede 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 de u caben todos los puntos en los límites de la ventana del mapa.
Ejemplo funciona perfectamente y u libremente puede comprobar aquí www.zemelapis.lt
Las respuestas son perfectos para ajustar los límites del mapa para marcadores, pero si se quiere ampliar los límites de mapas de Google para formas como polígonos y círculos, puede utilizar los códigos siguientes:
Para los 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 los 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));
El método setCenter () sigue siendo aplicable para la última versión del API de Google Maps para Flash, donde no existe fitBounds ().
El uso por debajo de uno,
map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel (límites));