Дано — гугло-карта с каким-то количеством маркеров.
Задача — автоматически смасштабировать и отцентрировать карту таким образом, чтобы было видно все маркеры.
Решение — использовать класс 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
Комментарии
Спасибо большое, очень помогла статья
Спасибо, то что искал, документация на google map все на англ. и теряешься
Спасибо! То же самое для Яндекс карт - http://goloburdin.blogspot.ru/2014/07/api-2x.html
Спасибо,шикарная статья.
Спасибо - все работает - кратко и по делу!
Вместо этого:
Достаточно так:
Большое спасибо! Долго искал эту функцию..
Спасибо!Статья помогла!Лишь возникла одна проблемка. Когда есть лишь одна метка делаеться слишком большой маштаб ,можно ли его как нибудь уменьшить?
Спасибо, помог.
Добавить комментарий