Центр / Встановити масштаб карти, щоб охопити всі видимі маркери?

Я встановлюю декілька маркерів на своїй карті і можу статично встановити рівні масштабування та центр, але те, що я хочу, - покрити всі маркери та збільшити масштаб, маючи видимі всі ринки

Доступні методи наступні

setZoom(zoom:number)

і

setCenter(latlng:LatLng)

Ні setCenterпідтримує багаторазове введення, ні вхідний масив, ні setZoomтакий тип функціональності

Потрібно використовувати fitBounds()метод.

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

Документація від developers.google.com/maps/documentation/javascript :

fitBounds(bounds[, padding])

Параметри:

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

Повернене значення: Жодне

Встановлює вікно перегляду таким чином, щоб він містив задані межі.
Примітка : Коли карта встановлена ​​на display: none, fitBoundsфункція зчитує розмір карти як 0x0і тому нічого не робить. Щоб змінити вікно перегляду, поки карта прихована, встановіть карту visibility: hidden, таким чином переконавшись, що div-карта має фактичний розмір.

Щоб розширити дану відповідь кількома корисними прийомами:

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

ОНОВЛЕННЯ:
Подальші дослідження в темі показують, що fitBounds () є асинхронним, і найкраще зробити маніпуляцію масштабуванням із слухачем, визначеним перед викликом Fit Bounds.
Дякую @Tim, @ xr280xr, більше прикладів на тему: ТАК: 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);

Розмір масиву повинен бути більше нуля. Ο інакше у вас будуть несподівані результати.

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

Тут доступна ця MarkerClustererутиліта на стороні клієнта для google Map, як зазначено тут у статтях розробника Google Map , тут коротко про те, що вона використовується:

Існує багато підходів для виконання того, що ви просили:

• Кластеризація на основі сітки
• Кластеризація на основі відстані
• Управління маркером Viewport
• Fusion таблиці
• Маркер кластер
• MarkerManager

Ви можете прочитати про них за наданим посиланням вище.

Marker Clustererвикористовує кластеризацію на основі сітки для кластеризації всіх маркерів, що бажають сітки. Кластеризація на основі сітки працює за допомогою поділу карти на квадрати певного розміру (розмір змінюється при кожному масштабі), а потім групування маркерів у кожен квадрат сітки.

Перед кластером

Після кластеризації

Я сподіваюся, що це те, що ви шукали, і це вирішить вашу проблему :)