Как подключить google map с отметками?

Часто в некоторых проектах, на странице о нас или связаться с нами, просят вставить google map с отметкой по их адресу. А бывает и так, что адресов несколько и соответственно отметок должно быть несколько. А что если отметки должны быть кликабельны и при нажатии должен всплывать текст?

Google map с отметками

See the Pen Code pen with marks by Aleksandrs (@CoolS2) on CodePen.

Первое, что надо сделать, это создать блок, где будет отображаться наша карта

<div id="map"></div> 

Дальше нужно задать высоту блоку, иначе по умолчанию она будет 0 и карта не будет отображена.

#map{
  width: 100%;
  height:100vh;
}

И самое интересное это js. У гугла уже есть хорошо описанная документация, но на английском языке. Там же есть куча примеров, все разжовано до мелочей. Гугл карта достаточно гибкая в настройках, можно менять цвет карты (дороги, реки, улицы и прочее). Можно обводить границы, ставить марки, анимировать. Все это можно почитать в документации.

Что касается нашего примера, то для начало нужно подключить Google Map API

<script src="https://maps.google.com/maps/api/js?key=[APIKEY]"></script>

Чтобы можно было пользоваться google API, нужно зарегистрироваться и в настройках Google developers , подключить к своему акаунту Google Map, и получить API KEY, который нужно вставить ссылку.

Google Map бесплатный для определенного количество посетителей. На данный момент этот предел достаточно большой и подойдет для большинства случаев. Но для больших коммерческих проектов это будет платной услугой. Более подробно вы можете ознакомиться на сайте Google developers.

Далее мы отображаем нашу карту в подготовленном блоке

<script src="https://maps.google.com/maps/api/js?key=[APIKEY]"></script>
google.maps.event.addDomListener(window, 'load', init);
function init() {

        var myOptions = {
            center: new google.maps.LatLng(56.943870, 24.218033), // Координаты, какое место отображать на карте
            zoom: 9, // Уровень риближения карты
            mapTypeId: google.maps.MapTypeId.ROADMAP // Тип карты

        };
        var map = new google.maps.Map(document.getElementById("map"), // В каком блоке будет отображаться карта
            myOptions);
    }

Сейчас, если запустить скрипт, то карта уже будет работать, но пока без отметок, так как мы еще их не написали.

Для начало создадим массив, в котором будет храниться вся информация наших отметок

var locations = [
       ['Rīga', 56.943870, 24.218033, 'Salnas iela 1a'],
       ['Tukums', 56.976461, 23.156618, 'Raudas iela 30a']
];

Далее мы создаем функцию, в которой будем расставлять наши марки по карте.

function setMarkers(map, locations) {

        var marker, i, mark_position;    
        for (i = 0; i < locations.length; i++) { // Проходимся по нашему массиву с марками

			// Тут вроде и так все понятно
            var title = locations[i][0];
            var lat = locations[i][1];
            var long = locations[i][2];
            var text = locations[i][3];

            mark_position = new google.maps.LatLng(lat, long); // Создаем позицию для отметки

             marker = new google.maps.Marker({ // Что будет содержаться в отметке
                 map: map, // К какой карте относиться отметка
                 title: title, // Заголовок отметки
                 position: mark_position, // Позиция отметки
                 animation: google.maps.Animation.DROP, // Анимация
                 icon: '/images/map-marker.png' // Можно поменять иконку, если оставить пустые скобки, то будет оригинальная иконка
            });
			
			// Дальше создаем контент для каждой отметки

            var content = '<div class="info-block"><h3>' + title + '</h3><b>' + "Address: </b>" + text + '</div>';
            var infowindow = new google.maps.InfoWindow();
			
			// При нажатии на марку, будет отображаться контент

            google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
                return function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                };
            })(marker,content,infowindow));
        }
    }

Вот и все дела, теперь осталось эту функцию запускать во время инициализации карты

<script src="https://maps.google.com/maps/api/js?key=[APIKEY]"></script>
google.maps.event.addDomListener(window, 'load', init);
function init() {

        var myOptions = {
            center: new google.maps.LatLng(56.943870, 24.218033), // Координаты, какое место отображать на карте
            zoom: 9, // Уровень риближения карты
            mapTypeId: google.maps.MapTypeId.ROADMAP // Тип карты

        };
        var map = new google.maps.Map(document.getElementById("map"), // В каком блоке будет отображаться карта
            myOptions);
			
		setMarkers(map, locations)
    }

Надеюсь статья была вам полезна, если остались вопросы, пишите в комментариях!

Так же есть классная статья, где вы сможете найти полезные и красивые кнопки для вашего сайта