Google Map API v3: establecer límites y centro

303

Recientemente me cambié a la API de Google Maps V3. Estoy trabajando en un ejemplo simple que traza marcadores de una matriz, sin embargo, no sé cómo centrar y hacer zoom automáticamente con respecto a los marcadores.

He buscado en la red alta y baja, incluida la 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 establecerí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]
    });
  }
}
Michael Bradley
fuente

Respuestas:

423

Sí, puede declarar su 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

spencercooly
fuente
42
También puede agregar este map.setCenter (limits.getCenter ());
Raman Ghai
Tanto la respuesta como el comentario de Raman ayudaron a reducir mi concentración en lo que necesitaba.
JustJohn
@ Sam152: podría estar interesado en una recompensa de 500 repeticiones por una pregunta relacionada .
Dan Dascalescu
185

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);
}
Michael Bradley
fuente
77
¡Gracias! Los documentos 3.0 son sorprendentemente vagos acerca de dónde fue esta funcionalidad.
Bill
12
Los documentos 3.0 son sorprendentemente vagos acerca de dónde fueron MUCHAS cosas. :(
Scott
55
Lo siento, esto está en el lugar equivocado. Se supone que es un comentario para la respuesta seleccionada. Pero, ¿no es necesario que la función de extensión esté dentro de su bucle for?
kidbrax
1
Hola, excelente código, pero ¿podría mejorarse este código para evitar "no hay imágenes disponibles en este nivel de zoom"? debido a que este código no se ocupa del nivel de zoom, seguro que muestra todos los marcadores, pero personalmente preferiría ver un zoom más bajo para evitar los mensajes "sin imágenes ...". ¿Alguna idea por favor?
slah
¿Son estos "límites.extender (myLatLng); map.fitBounds (límites);" disponible para Android también?
lionfly
5

Mi sugerencia para google maps api v3 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, usted ajustará todos los puntos en los límites de su ventana de mapa.

El ejemplo funciona perfectamente y puedes consultarlo libremente aquí www.zemelapis.lt

hora local
fuente
En lugar de regresar falsesi boundses así null, podrías maps[ mapId ].getBounds().
kaiser
@localtime en realidad, su sitio web necesita claves API de Google Maps para funcionar
1

Las respuestas son perfectas para ajustar los límites del mapa para los marcadores, pero si desea expandir los límites de Google Maps para formas como polígonos y círculos, puede usar los siguientes códigos:

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 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));
Hossein
fuente
-1

El método setCenter () sigue siendo aplicable para la última versión de API de Maps para Flash donde fitBounds () no existe.

Sebastien
fuente
-15

Use debajo de uno,

map.setCenter (limits.getCenter (), map.getBoundsZoomLevel (límites));

Khayer
fuente
12
Esto es para Google Maps API v2
dave1010
Debe proporcionar una solución más pensada. Y creo que esto es para Google Maps v2.
AllJs