javascript - geolocalizacion - google maps free api

¿Centrar/configurar zoom del mapa para cubrir todos los marcadores visibles?

Question

Estoy configurando varios marcadores en mi mapa y puedo establecer de forma estática los niveles de zoom y el centro, pero lo que quiero es cubrir todos los marcadores y hacer zoom tanto como sea posible con todos los mercados visibles

Los métodos disponibles están siguiendo

setZoom(zoom:number)

y

setZoom(zoom:number)

Ni setCenter admite entradas de matriz de ubicación o ubicación múltiple ni setZoom tiene este tipo de funcionalidad

Answer 1

El tamaño de la matriz debe ser mayor que cero. De lo contrario tendrás resultados inesperados.

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

Answer 2

Esta utilidad del lado del cliente de MarkerClusterer disponible para Google Map, tal como se especifica aquí en los Artículos del desarrollador de Google Map , aquí hay un breve resumen de su uso:

Hay muchos enfoques para hacer lo que pediste:

• Clustering basado en grilla
• Agrupación basada en la distancia
• Gestión de marcadores de la ventana gráfica
• Tablas de fusión
• Agrupador de marcadores
• MarkerManager

Puedes leer sobre ellos en el enlace provisto arriba.

Marker Clusterer usa la agrupación basada en cuadrícula para agrupar todo el marcador que desea la cuadrícula. El agrupamiento basado en cuadrícula funciona dividiendo el mapa en cuadrados de un tamaño determinado (el tamaño cambia en cada zoom) y luego agrupando los marcadores en cada cuadrado de cuadrícula.

Antes de la agrupación

Después de la agrupación

Espero que esto sea lo que buscabas y esto resolverá tu problema :)

Answer 3

Necesitas usar el método fitBounds() .

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i].getPosition());
}

map.fitBounds(bounds);

setZoom(zoom:number) :

Answer 4

Para extender la respuesta dada con algunos trucos útiles:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
   bounds.extend(markers[i].getPosition());
}

//center the map to a specific spot (city)
map.setCenter(center); 

//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());

map.fitBounds(bounds);

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
  map.setZoom(15);
}

//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

ACTUALIZAR:
Investigaciones adicionales en el tema muestran que fitBounds () es un asíncrono y es mejor hacer la manipulación del zoom con un oyente definido antes de llamar Fit Bounds.
Gracias @Tim, @ xr280xr, más ejemplos sobre el tema: SO:setzoom-after-fitbounds

google.maps.event.addListenerOnce(map, ''bounds_changed'', function(event) {
  this.setZoom(map.getZoom()-1);

  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
map.fitBounds(bounds);