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]
    });
  }
}

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


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


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);
}

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


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));

-1

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


-15

Use debajo de uno,

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


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.