Zoom der Karte zentrieren / einstellen, um alle sichtbaren Markierungen abzudecken?

Ich setze mehrere Markierungen auf meiner Karte und kann die Zoomstufen und die Mitte statisch einstellen. Ich möchte jedoch, dass alle Markierungen abgedeckt und so weit wie möglich gezoomt werden, damit alle Märkte sichtbar sind

Folgende Methoden stehen zur Verfügung

setZoom(zoom:number)

und

setCenter(latlng:LatLng)

setCenterUnterstützt weder die Eingabe mehrerer Standorte oder Standortarrays noch setZoomverfügt diese Art von Funktionalität

Sie müssen die fitBounds()Methode verwenden.

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

map.fitBounds(bounds);

Dokumentation von developer.google.com/maps/documentation/javascript :

fitBounds(bounds[, padding])

Parameter:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]

Rückgabewert: Keine

Legt fest, dass das Ansichtsfenster die angegebenen Grenzen enthält.
Hinweis : Wenn die Karte auf eingestellt ist display: none, fitBoundsliest die Funktion die Größe der Karte als 0x0und führt daher nichts aus. Um das Ansichtsfenster zu ändern, während die Karte ausgeblendet ist, stellen Sie die Karte auf ein visibility: hidden, um sicherzustellen, dass das Kartendiv eine tatsächliche Größe hat.

So erweitern Sie die gegebene Antwort mit wenigen nützlichen Tricks:

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

UPDATE:
Weitere Untersuchungen im Thema zeigen, dass fitBounds () asynchron ist und es am besten ist, die Zoom-Manipulation mit einem definierten Listener durchzuführen, bevor Fit Bounds aufgerufen wird.
Danke @Tim, @ xr280xr, weitere Beispiele zum Thema: 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);

Die Größe des Arrays muss größer als Null sein. Andernfalls erhalten Sie unerwartete Ergebnisse.

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

Es gibt dieses MarkerClustererclientseitige Dienstprogramm für Google Map, wie hier in den Artikeln des Google Map-Entwicklers angegeben. Hier finden Sie eine kurze Beschreibung der Verwendung:

Es gibt viele Ansätze, um das zu tun, wonach Sie gefragt haben:

• Grid-basiertes Clustering
• Entfernungsbasiertes Clustering
• Viewport Marker Management
• Fusionstabellen
• Marker Clusterer
• MarkerManager

Sie können darüber unter dem oben angegebenen Link lesen.

Marker Clustererverwendet Grid Based Clustering, um alle Marker zu gruppieren, die das Grid wünschen. Beim gitterbasierten Clustering wird die Karte in Quadrate einer bestimmten Größe unterteilt (die Größe ändert sich bei jedem Zoom) und anschließend die Markierungen in jedem Gitterquadrat gruppiert.

Vor dem Clustering

Nach dem Clustering

Ich hoffe das ist was du gesucht hast und das wird dein Problem lösen :)