Centrer / Définir le zoom de la carte pour couvrir tous les marqueurs visibles?

Je mets plusieurs marqueurs sur ma carte et je peux définir statiquement les niveaux de zoom et le centre mais ce que je veux, c'est couvrir tous les marqueurs et zoomer autant que possible en ayant tous les marchés visibles

Les méthodes disponibles sont les suivantes

setZoom(zoom:number)

et

setCenter(latlng:LatLng)

Ni setCenterprend en charge plusieurs emplacements ou entrée de tableau d'emplacement, ni setZoomce type de fonctionnalité

Vous devez utiliser la fitBounds()méthode.

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

Documentation de developers.google.com/maps/documentation/javascript :

fitBounds(bounds[, padding])

Paramètres:

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

Valeur de retour: aucune

Définit la fenêtre pour contenir les limites données.
Remarque : Lorsque la carte est définie sur display: none, la fitBoundsfonction lit la taille de la carte sous la forme 0x0et ne fait donc rien. Pour modifier la fenêtre d'affichage alors que la carte est masquée, définissez la carte sur visibility: hidden, garantissant ainsi que la div de la carte a une taille réelle.

Pour étendre la réponse donnée avec quelques astuces utiles:

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

MISE À JOUR:
D'autres recherches dans le sujet montrent que fitBounds () est un asynchrone et il est préférable de faire une manipulation Zoom avec un écouteur défini avant d'appeler Fit Bounds.
Merci @Tim, @ xr280xr, plus d'exemples sur le sujet: 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);

La taille du tableau doit être supérieure à zéro. Sinon, vous obtiendrez des résultats inattendus.

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

Il y a cet MarkerClustererutilitaire côté client disponible pour google map comme spécifié ici dans les articles pour développeurs Google Map , voici un bref aperçu de son utilisation:

Il existe de nombreuses approches pour faire ce que vous avez demandé:

• Clustering basé sur une grille
• Clustering basé sur la distance
• Gestion des marqueurs de fenêtre
• Tables de fusion
• Clusterer de marqueurs
• MarkerManager

Vous pouvez les lire sur le lien fourni ci-dessus.

Marker Clustererutilise le clustering basé sur une grille pour regrouper tous les marqueurs souhaitant la grille. Le regroupement basé sur une grille fonctionne en divisant la carte en carrés d'une certaine taille (la taille change à chaque zoom), puis en regroupant les marqueurs dans chaque carré de la grille.

Avant le clustering

Après le clustering

J'espère que c'est ce que vous cherchiez et que cela résoudra votre problème :)