Ajuste automatiquement le zoom pour accueillir tous les marqueurs dans une carte google

Question

Utilisation de la dernière version de Google Maps. Comment ajouter des marqueurs en utilisant la longitude et la latitude et ajuster automatiquement le niveau de zoom de la carte pour inclure tous les marqueurs en utilisant JavaScript?

Answer 1

L'API Google Maps v3 fournit un objet LatLngBounds auquel vous pouvez ajouter plusieurs objets LatLng. Vous pouvez ensuite passer ce à Map.fitBounds() fonction comme décrit ici:

• Zoom-To-Fit All Markers, Polylines or Polygons on A Google Map - API v2
• Zoom-to-Fit All Markers on Google Map v3

Exemple partiel

var latlng = [ 
    new google.maps.LatLng(1.23, 4.56), 
    new google.maps.LatLng(7.89, 1.01), 
    // ... 
]; 
var latlngbounds = new google.maps.LatLngBounds(); 
for (var i = 0; i < latlng.length; i++) { 
    latlngbounds.extend(latlng[i]); 
} 
map.fitBounds(latlngbounds); 

Answer 2

Vous ajoutez des marqueurs à votre carte google par l'instanciation d'un objet marker pour chacun de vos paires de latitude/longitude:

var marker = new google.maps.Marker({ 
    position: currentLatLng, 
    map: map, 
    title:"Title!" 
}); 

L'option map sur le constructer marqueur associera le nouvel objet du marché avec votre carte. Pour agrandir votre carte afin d'inclure vos nouveaux marqueurs, utilisez la méthode fitBounds sur l'objet map. fitBounds prend un objet latLngBounds en tant que paramètre. Cet objet a une méthode étendre qui ajustera les limites pour inclure une nouvelle latitude/longitude. Il vous suffit donc de parcourir tous vos points, en appelant étendre sur un seul objet latLngBounds. Cela étendra les limites pour inclure tous vos marqueurs. Une fois que vous avez fait cela, vous passez cet objet dans la méthode fitBounds sur le map et il va zoomer pour afficher tous vos nouveaux marqueurs.