xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

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

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

Решение — использовать класс 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
Похожие записи

Комментарии RSS

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

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

Спасибо! То же самое для Яндекс карт - http://goloburdin.blogspot.ru/2014/07/api-2x.html

Спасибо,шикарная статья.

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

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

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

Достаточно так:
map.fitBounds(markersBounds)

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

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании