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

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

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

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

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