Карты Google Maps — вставка и оформление (стилизация) карт на свой сайт

Карты Google Maps - вставка и оформление (стилизация) карт на свой сайт

Всем привет! Сегодня мы научимся не только устанавливать карту Google Maps на свой сайт (любую html страницу), но и стилизовать карты Google Maps — изменять цвета карты, а также добавлять описание к маркеру карты Google Maps, изменять вид (изображение) маркера и добавлять к нему свое описание. Поехали!)

Важное примечание. Все наши эксперименты мы будем делать локально. Для того чтобы использовать карты Google Maps на своем сайте необходимо получить специальный Auth ключ. Сделать это несложно. Его получение мы опустим и рассматривать не будем.

1. Вставка карты Google Maps

Для начала давайте создадим html страницу и вставим на нее карту Google Maps. Делать это мы будем с помощью Google Maps API. То есть пойдем продвинутым путем. Надо заметить что у Google есть хорошая документация и инструкция на русском и английском по использованию Google Maps. Так что программисты могут сразу отправиться туда. Если же вы хотите получить понятный пошаговый урок — то оставайтесь.

Теперь я опишу по очереди действия которые необходимо сделать и после приведу код страницы с комментариями. Сперва создаем HTML страницу. Затем:

  1. На странице создаем элемент <div id=»map»></div> внутри которого у нас будет отображаться карта Google Maps.
  2. Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице.
  3. Подключаем библиотеку Google Maps Api, чтобы создать карту и управлять ей. Без этой библиотеки карта не заработает.
  4. Пишем скрипт который создаст и отобразит карту Google Maps на странице.

Вот код страницы который у нас получился. Обратите внимание на комментарии внутри, я описал что и где происходит.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - My Google Map</title>
    
    <!-- 2. Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице -->
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    
    <!-- 1. Создаем элемент внутри которого у нас будет отображаться карта Google Maps -->
    <div id="map"></div>

    <!-- 4. Пишем скрипт который создаст и отобразит карту Google Maps на странице. -->
    <script type="text/javascript">

        // Определяем переменную map
        var map;

        // Функция initMap которая отрисует карту на странице
        function initMap() {

            // В переменной map создаем объект карты GoogleMaps и вешаем эту переменную на <div id="map"></div>
            map = new google.maps.Map(document.getElementById('map'), {
                // При создании объекта карты необходимо указать его свойства
                // center - определяем точку на которой карта будет центрироваться
                center: {lat: -34.397, lng: 150.644},
                // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.
                zoom: 8
            });
        }
    </script>

    <!-- 3. Подключаем библиотеку Google Maps Api, чтобы создать карту -->
    <!-- Атрибуты async и defer - позволяют загружать этот скрипт асинхронно, вместе с загрузкой всей страницы  -->
    <!-- В подключении библиотеки Google Maps Api в конце указан параметр callback, после  подключения и загрузки этого Api сработает функция initMap для отрисовки карты,  которую мы описали выше -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
    
</body>
</html>

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

 

2. Карта Google Maps Api — определяем место и устанавливаем маркер

2.1 Определяем место центрирования карты

Давайте покажем на карте расположение Большого Театра. В параметре center мы определяли координаты центрирования карты:

center: {lat: -34.397, lng: 150.644},

Нам необходимо получить такие координаты для нашего места. Для этого идем в обычную версию Google Maps и правой клавишей кликаем на интересующем нас месте. Нажимаем «Что здесь» и получаем координаты места. (55.760186, 37.618711). Заодно и изменю масштаб, установив его на 18: zoom: 18.

Определение координат места для маркера на карте Google Maps

Определение координат места для маркера на карте Google Maps

 

2.2 Устанавливаем маркер

Место определили. Осталось показать маркер на карте. Внутри функции initMap() добавляем переменную для маркера:

// Создаем маркер на карте
var marker = new google.maps.Marker({

    // Определяем позицию маркера
    position: {lat: 55.760186, lng: 37.618711},

    // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)
    map: map,

    // Пишем название маркера - появится если навести на него курсор и немного подождать
    title: 'Наш маркер: Большой театр'
});

Теперь у нас есть карта с маркером

Установка маркера на карте Google Maps

Как добавить событие по клику на карту или маркер в Google Maps

Также на клик по маркеру можно добавить свое событие. В итоговом коде страницы мы это делать не будем. Но делается это вот так:

google.maps.event.addListener(marker, 'click', function() {
   document.location='http://google.com';
});

Первый параметр метода addListener — это объект, для которого добавляется событие, в нашем случае marker. Объектом может выступать не только маркер но и сама карта. Второй параметр click определяет тип события, в данном случае один щелчок. Третий — функция обработчик, которая сработает.

Более подробно про маркер и возможности работы с ним рекомендую посмотреть в документации.

2.3 Установка собственной иконки для маркера в Google Maps

Маркер установили. Но он стандартный, и это совсем не интересно. Давайте заменим его на свою иконку. Я нашел одну подходящую иконку которую мы будем использовать.

В описание переменной с маркером, добавлю иконку.

// Создаем маркер на карте
var marker = new google.maps.Marker({

                // Определяем позицию маркера
                position: {lat: 55.760186, lng: 37.618711},

                // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)
                map: map,

                // Пишем название маркера - появится если навести на него курсор и немного подождать
                title: 'Наш маркер: Большой театр',

                // Укажем свою иконку для маркера
                icon: 'theatre_icon.png'
});

Про более сложные значки — можно посмотреть в документации.

 

3. Задаем свои стили оформления для карты Google Maps

Пришло время раскрасить нашу карту. Придать ей особый и неповторимый вид. Делать мы это будем с помощью сервиса Snazzy Maps который имеет большое количество скинов для Google карт. И позволяет делать вот такие крутые карты:

Вставка стилизованной карты Google Maps - Snazzy Maps com. Изменяем цвета карты.

Я выбрал стиль карты который называется Blue water. На странице данного стиля можно найти код для оформления и скачать файл с примером — применения такого стилевого оформления к карте Google Maps.

Стили для оформления карты добавляем в свойство styles которое мы указываем для переменной map — когда создаем в ней объект с картой.

Привожу весь фрагмент кода:

// В переменной map создаем объект карты GoogleMaps
map = new google.maps.Map(document.getElementById('map'), {
                // При создании объекта карты необходимо указать его свойства
                
                // center - определяем точку на которой карта будет центрироваться
                center: {lat: 55.760186, lng: 37.618711},
                
                // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.
                zoom: 18,

                // Добавляем свои стили для отображения карты
                styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
});

Теперь наша карта выглядит вот так:

Вставка стилизованной карты Google Maps. Свое оформление для карт Google Maps.

 

4. Информационные окна

Карту можно еще улучшить, добавив информационное окно по клику на наш маркер. Документация по ним лежит здесь. Если вкратце, то чтобы добавить инфо окно необходимо:

  1. Создать само окно и контент внутри него
  2. Сделать так чтобы оно появлялось по клику на маркер.

Все это происходит внутри функции initMap()

4.1 Опишем контент инфо-окна:

// Создаем наполнение для информационного окна
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Большой театр</h1>'+
'<div id="bodyContent">'+
'<p>Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр — один из крупнейших' +
'в России и один из самых значительных в мире театров оперы и балета.</p>'+
'<p><b>Веб-сайт:</b> <a href="http://www.bolshoi.ru/" target="_blank">bolshoi.ru</a>'+
'</p>'+
'</div>'+
'</div>';

4.2 Создадим инфо-окно

// Создаем информационное окно
var infowindow = new google.maps.InfoWindow({
     content: contentString,
     maxWidth: 400
});

4.3 Делаем так чтобы по клику на маркер — появлялось инфо-окно

// Создаем прослушивание, по клику на маркер - открыть инфо-окно infowindow
marker.addListener('click', function() {
     infowindow.open(map, marker);
});

Теперь карта с инфо-окном выглядит следующим образом:

Добавляем инфо окно и описание к маркеру на карту Google Maps.

Также можно убирать стандартные элементы управления с карты, включать/выключать нужные и ненужные, и даже создать свои. Описание всего этого вы найдете в документации.

Готовая карта

Готовую получившуюся карту и код можно посмотреть ниже или на codepen.

See the Pen Google Map by Yurij (@rightblog) on CodePen.18493

Ссылки по теме:

Документация Google Maps JavaScript API

Осваиваем Google Maps API

Google Maps: перемещение карты и маркеров

  • Pavel Petrenko

    Здравствуйте. Подскажите пожалуйста, как добавить несколько десятков маркеров одновременно.
    Спасибо.

  • Mihail Svetlov

    на андроиде не работает, карта не грузится на смартфоне

    • Проверил работает.

  • Mihail Svetlov

    У меня заработало после того как включил Google Maps Java Script API в консоли разработчика

  • Павел

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

  • Макисм Верстальщик

    Спасибо за пост, полезно, понятно, и сразу не навалили кучу инфы))

  • Иван Сахник

    как изменить язык?

  • Вячеслав Боргомотов

    Огромное спасибо! Очень все понятно и доходчиво! Все бы так писали статьи — цены не было бы.

    Еще раз огромное спасибо!!!