#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);
 
}

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

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

Артур 25 ноября 2016 г. в 02:03

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

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад