Автоцентрирование карты gmaps c несколькими точками

• 
  Vadim Tsukanov
  Разработчик
• Дата публикации
  15.03.2020
• Категория
  JavaScript

Много точек на карте… Естественно, необходимо центрировать, но как это сделать?

Я редко работаю с фронтом, но иногда приходится. Вот и в очередной раз необходимо было прописать динамику для нанесения точек на карту, однако, в отличии от тестовых данных, реальные точки находили в разных городах и необходимо было реализовать именно автоматическое центрирование точек.

На самом деле код я подсмотрел на stackoverflow, но т.к. мне это часто необходимо — я решил добавить себе в блог, может кто-то найдет его у нас в блоге, а кто-то и в первоисточнике — моя задача — сделать небольшую шпаргалку для себя.

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();    

for (i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  //extend the bounds to include each marker's position
  bounds.extend(marker.position);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
    map.setZoom(3);
    google.maps.event.removeListener(listener);
});

Вот и все,что необходимо. Мой код на практике несколько иной, но суть такая же:

1. Создаем массив bounds
2. Собираем в него точки
3. Делаем map.fitBounds(bounds)

Пиши коммент, если помогло!