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].

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