Javascript → Автоматическое масштабирование и центрирование гугло-карты для показа всех маркеров

26.01.2013

Дано — гугло-карта с каким-то количеством маркеров.

Задача — автоматически смасштабировать и отцентрировать карту таким образом, чтобы было видно все маркеры.

Решение — использовать класс LatLngBounds, позволяющий определять область на карте:

// Создаём карту
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

// Маркеры
var markers = [
    ['Маркер 1', 45.21465, 65.14896],
    ['Маркер 2', 65.14896, 45.21465],
    // ...
];

// Область показа маркеров
var markersBounds = new google.maps.LatLngBounds();

for (var i = 0; i < markers.length; i++) {
    var markerPosition = new google.maps.LatLng(markers[i][1], markers[i][2]);

    // Добавляем координаты маркера в область
    markersBounds.extend(markerPosition);
    
    // Создаём маркер
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map,   
        title: markers[i][0],
    }); 
}
  
// Центрируем и масштабируем карту
map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));     
Написанное актуально для
Google Maps API 3
Похожие записи

Комментарии

Вячеслав
28.04.2013, 19:44

Спасибо большое, очень помогла статья

Спасибо, то что искал, документация на google map все на англ. и теряешься

Гость
06.10.2015, 11:22

Спасибо - все работает - кратко и по делу!

Гость
18.11.2015, 06:01

Вместо этого:

// Центрируем и масштабируем карту
map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));   

Достаточно так:

map.fitBounds(markersBounds)
Гость
05.03.2016, 19:36

Большое спасибо! Долго искал эту функцию..

Спасибо!Статья помогла!Лишь возникла одна проблемка. Когда есть лишь одна метка делаеться слишком большой маштаб ,можно ли его как нибудь уменьшить?

Добавить комментарий