Pusat / Atur Zoom Peta untuk mencakup semua Penanda yang terlihat?

Saya menetapkan beberapa penanda di peta saya dan saya dapat mengatur secara statis tingkat zoom dan pusat tetapi yang saya inginkan adalah, untuk mencakup semua penanda dan memperbesar sebanyak mungkin agar semua pasar terlihat

Metode yang tersedia mengikuti

setZoom(zoom:number)

dan

setCenter(latlng:LatLng)

Tidak setCentermendukung beberapa lokasi atau input array Lokasi juga setZoomtidak memiliki jenis fungsi ini

Anda perlu menggunakan fitBounds()metode ini.

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

Dokumentasi dari developers.google.com/maps/documentation/javascript :

fitBounds(bounds[, padding])

Parameter:

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

Nilai Pengembalian: Tidak Ada

Menetapkan viewport untuk berisi batas yang diberikan.
Catatan : Ketika peta diatur ke display: none, fitBoundsfungsi membaca ukuran peta sebagai 0x0, dan karena itu tidak melakukan apa pun. Untuk mengubah viewport saat peta disembunyikan, atur peta visibility: hidden, dengan demikian memastikan div peta memiliki ukuran aktual.

Untuk memperluas jawaban yang diberikan dengan beberapa trik bermanfaat:

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:
Penelitian lebih lanjut dalam topik ini menunjukkan bahwa fitBounds () adalah asynchronic dan yang terbaik adalah membuat manipulasi Zoom dengan pendengar yang ditentukan sebelum memanggil Fit Bounds.
Terima kasih @Tim, @ xr280xr, lebih banyak contoh pada topik: 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);

Ukuran array harus lebih besar dari nol. Ο sebaliknya, Anda akan mendapatkan hasil yang tidak terduga.

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

Ada MarkerClustererutilitas sisi klien ini tersedia untuk google Map sebagaimana ditentukan di sini di Artikel pengembang Google Map , di sini adalah singkat tentang apa penggunaannya:

Ada banyak pendekatan untuk melakukan apa yang Anda minta:

• Pengelompokan berbasis grid
• Pengelompokan berbasis jarak
• Manajemen Penanda Viewport
• Tabel Fusion
• Marker Clusterer
• MarkerManager

Anda dapat membacanya di tautan yang disediakan di atas.

Marker Clusterermenggunakan Grid Based Clustering untuk mengelompokkan semua marker yang ingin grid. Pengelompokan berbasis-grid berfungsi dengan membagi peta menjadi kotak-kotak dengan ukuran tertentu (ukurannya berubah di setiap zoom) dan kemudian mengelompokkan penanda ke dalam setiap kotak persegi.

Sebelum Clustering

Setelah Clustering

Saya harap ini yang Anda cari & ini akan menyelesaikan masalah Anda :)