#4. Google Maps. Добавить множество маркеров

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

Это все конечно здорово, но на практике редко используется только один маркер на карте. Чаще всего требуется добавить множество маркеров и о том, как это сделать, у нас и пойдет речь в данной статье.

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

var markersData = [
{
lat: 56.246205,     // Широта
lng: 43.8964165,    // Долгота
name: "Название 1", // Произвольное название, которое будем выводить в информационном окне
address:"Адрес 1"   // Адрес, который также будем выводить в информационном окне
},
{
lat: 56.2763807,
lng: 43.94534,
name: "Название 2",
address:"Адрес 2"
},
{
lat: 56.3144715,
lng: 43.9922894,
name: "Название 3",
address:"Адрес 3"
}
];

Далее меняем функцию initMap.

// Объявляем переменные map и infoWindow за пределами функции initMap,
// тем самым делая их глобальными и теперь мы их можем использовать внутри любой функции, а не только внутри initMap, как это было раньше.
var map, infoWindow;
function initMap() {
var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641);
var mapOptions = {
center: centerLatLng,
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Создаем объект информационного окна и помещаем его в переменную infoWindow
// Так как у каждого информационного окна свое содержимое, то создаем пустой объект, без передачи ему параметра content
infoWindow = new google.maps.InfoWindow();
// Отслеживаем клик в любом месте карты
google.maps.event.addListener(map, "click", function() {
// infoWindow.close - закрываем информационное окно.
infoWindow.close();
});
// Перебираем в цикле все координата хранящиеся в markersData
for (var i = 0; i < markersData.length; i++){
var latLng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address = markersData[i].address;
// Добавляем маркер с информационным окном
addMarker(latLng, name, address);
}
}
google.maps.event.addDomListener(window, "load", initMap);
// Функция добавления маркера с информационным окном
function addMarker(latLng, name, address) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: name
});
// Отслеживаем клик по нашему маркеру
google.maps.event.addListener(marker, "click", function() {
// contentString - это переменная в которой хранится содержимое информационного окна.
var contentString = '<div class="infowindow">' +
'<h3>' + name + '</h3>' +
'<p>' + address + '</p>' +
'</div>';
// Меняем содержимое информационного окна
infoWindow.setContent(contentString);
// Показываем информационное окно
infoWindow.open(map, marker);
});
}

Смотрим, что у нас получилось

Как мы видим, маркеры действительно добавились на карту. Единственное, что может напрягать, так это близкое расположение маркеров друг к другу. Это все происходит из-за того, что зум для карты выбран слишком маленький.

Напомню, что зум мы указывали при инициализации карты

var mapOptions = {
center: centerLatLng,
zoom: 8 // Зум по умолчанию
};

Разумеется мы можем увеличить значение зума по умолчанию и тем самым маркеры уже не будут накладываться друг на друга, но это не совсем правильно. Гораздо лучше сделать так, что зум подбирался автоматически, таким образом, чтобы все маркеры были в зоне видимости.

Для этого немного изменим функцию initMap, добавив туда 3 строки (их я прокомментировал).

function initMap() {
var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641);
var mapOptions = {
center: centerLatLng,
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, "click", function() {
infoWindow.close();
});
// Определяем границы видимой области карты в соответствии с положением маркеров
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++){
var latLng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address = markersData[i].address;
addMarker(latLng, name, address);
// Расширяем границы нашей видимой области, добавив координаты нашего текущего маркера
bounds.extend(latLng);
}
// Автоматически масштабируем карту так, чтобы все маркеры были в видимой области карты
map.fitBounds(bounds);
}

Все исходники, вы можете забрать из "Дополнительных материалов".

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

  • Спасибо за статью

  • Спасибо за материалы. А можно как то дополнить ваш код,чтобы маркеры с инфоокнами появлялись на карте по клику на ссылку вне карты.Например есть список городов, и при клике по названию города появляется нужный маркер,и показывался по одному на карте.