Стилизованные карты гугл. Пользовательские стили на картах Google — индивидуальное оформление Google Maps. Как добавить событие по клику на карту или маркер в Google Maps

• Tutorial

В первый раз столкнувшись с внедрением и кастомизацией Google Maps, я не нашел единой статьи, рассматривающей все необходимые моменты - информацию пришлось искать по крупицам, а что-то выдумывать самому. После чего и было решено написать эту статью, чтобы люди, ранее не работавшие со стилизацией Google Maps, но при этом ограниченные временными рамками (а может, и желанием) для полноценного изучения API, смогли быстро получить необходимую информацию и материалы. Тем более, что и те, кто обладает определенным опытом, смогут почерпнуть для себя из этой статьи какую-нибудь интересную фишку, к примеру - параллакс для элементов информационного окна.

В этой статье мы рассмотрим:

1. Внедрение Google Maps на сайт

• Добавление через вставку iframe в разметку
• Добавление через API

2. Кастомизация маркера

• Инициализация маркера
• Анимация маркера
• Изображение маркера

• Добавление информационного окна
• Открытие информационного окна
• Кастомизация элементов информационного окна
• Параллакс-эффект для элементов в информационном окне

4. Кастомизация карты

• Изменение цвета объектов карты
• Кастомизация элементов управления
• Маска для карты

1. Внедрение на сайт

Добавление через вставку iframe в разметку

Если у вас нет необходимости изменять маркер, делать кастомное информационное окно или еще каким-либо образом воздействовать на карту, для ее добавления достаточно сделать следующее:

Добавление через API

Но если необходимо произвести какие-либо манипуляции, нам понадобится ключ. Если его нет рядом, можно получить тут: ссыль

Встраиваем его в адрес вместо YOUR_API_KEY:

Если нужно вызывать коллбэк после загрузки api, после ключа надо будет дописать YOUR_API_KEY&callback=initMap с названием вашей функции. Подключаем скрипт на странице и создаем в разметке блок для будущей карты:

Теперь необходимо инициализировать карту:

Function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, map = new google.maps.Map(document.getElementById("map"), { center: coordinates }); }
Координаты можно узнать при помощи опции «Что здесь», описанной выше.

Свойства, которые могут сразу понадобиться:

• zoom: number - определяет первоначальный масштаб.
• disableDefaultUI: boolean – убирает элементы управления.
• scrollwheel: boolean - отключает масштабирование колесиком мыши (бывает полезно, если карта на всю ширину страницы и перебивает прокрутку вниз).

2. Кастомизация маркера

Инициализация маркера

Для начала добавим маркер:

Function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, map = new google.maps.Map(document.getElementById("map"), { center: coordinates }), marker = new google.maps.Marker({ position: coordinates, map: map }); }
position (обязательно) указывает начальное положение маркера. Если указать те же координаты, что и для карты, то маркер будет по центру экрана. Сместить маркер можно изменив значение координат, либо сменив положение самой карты относительно видимой области (родительского блока).
map (не обязательно) указывает карту, на которой помещается маркер.

Анимация маркера

Для маркера можно задать анимацию:

• DROP – после загрузки карты маркер падает сверху.
• BOUNCE – маркер подпрыгивает на месте.

function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, map = new google.maps.Map(document.getElementById("map"), { center: coordinates }), marker = new google.maps.Marker({ position: coordinates, map: map, animation: google.maps.Animation.BOUNCE }); }
Анимацию можно задать при инициализации маркера, добавить или убрать, вызвав метод setAnimation() .

Пример анимации маркера при закрытии информационного окна и прекращении при открытии:

Google.maps.event.addListener(infowindow,"closeclick",function(){ marker.setAnimation(google.maps.Animation.BOUNCE); }); marker.addListener("click", function () { marker.setAnimation(null); });
Изображение маркера

Изображение маркера можно изменить, задав адрес картинки для свойства icon .

Image = "images/marker.png", marker = new google.maps.Marker({ position: coordinates, map: map, icon: image });
3. Кастомизация информационного окна

Добавление информационного окна

В кастомное информационное окно можно добавить любую разметку через свойство content:

Function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, popupContent = "

Что угодно

", markerImage = "images/marker.png", map = new google.maps.Map(document.getElementById("map"), { center: {lat: 47.212325, lng: 38.933663} }), marker = new google.maps.Marker({ position: coordinates, map: map, icon: markerImage }), infowindow = new google.maps.InfoWindow({ content: popupContent }); }
Открытие информационного окна

Чтобы информационное окно было видно сразу, надо вызвать метод open() :

Infowindow.open(map, marker);
Также следует добавить вызов окна при клике на маркер (в противном случае мы не сможем открыть попап):

Marker.addListener("click", function() { infowindow.open(map, marker); });
Кастомизация элементов информационного окна

Информационное окно может быть как кастомное, так и стандартное. В кастомное мы можем добавить любые элементы и работать с ними, возможности ограничены лишь фантазией.

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

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

Gm-style-iw { background: $black; box-shadow: -14px 0px 0px $black, -14px 9px 0px $black, -14px -8px 0px $black, 15px -8px 0px $black, 15px 9px 0px $black; }
Но обо всем по порядку:

Gm-style-iw - основной блок, в нем находится контент. На скриншоте, расположенном выше, этот блок имеет черный фон.
.poi-info-window - обертка для текста в стандартном информационном окне, находится внутри. .gm-style-iw
.gm-style-iw + div – крестик.

Как теперь повлиять на область вне блока контента? Выйти за его пределы. В первую очередь надо добавить свойство, которое сделает видимыми блоки, выходящие за границы:

Gm-style-iw { overflow: visible !important; div { overflow: visible !important; } }
Теперь для.gm-style-iw , или блоков внутри можно создать псевдоэлементы для перекрытия фона и стрелочки:

Gm-style-iw { // Фон &::before { content: ""; width: calc(100% + 29px); height: calc(100% + 17px); @include absolute; @include center-align; background: $black; } // Стрелочка &::after { content: ""; width: 0; height: 0; border: 22px solid transparent; border-top-color: $black; z-index: 4; @include absolute; top: auto; bottom: -53px; margin: auto; } }
Получаем следующее:

Параллакс-эффект для элементов в информационном окне

Тут возникает небольшая проблема, связанная с тем, что объекты карты создаются динамически, и нельзя просто так взять и прикрепить к ним обработчик, а клонировать блок при помощи.clone(true) в контент информационного окна с переносом обработчиков нам не позволит API.

Как вариант, можно проверять наличие элемента и сохранять после появления:

Var $parallaxImg = null; this.$body.mousemove(function(e) { if($parallaxImg) { ... } else if($(this.parallaxImg).length) { $parallaxImg = $(this.parallaxImg); } }.bind(this));
Теперь просто добавим код, смещающий блок по горизонтали в зависимости от положения курсора:

Var $parallaxImg = null; this.$body.mousemove(function(e) { if($parallaxImg) { var $el = $(e.currentTarget), xPos = e.pageX - (window.innerWidth / 2), mXPcnt = Math.round(xPos / $el.width() * 100), diffX = $parallaxImg.width() - $el.width(), myX = diffX * (mXPcnt / 1500); $parallaxImg.animate({left: myX}, 0); } else if($(this.parallaxImg).length) { $parallaxImg = $(this.parallaxImg); } }.bind(this));
Если клик по динамическому элементу нужно обработать, просто ставим обработчик на обертку и ловим объект на всплытии:

$(".map").on("click", ".js-parallax-img", function() { ... });
4. Кастомизация карты

Изменение цвета объектов карты

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

Пример настроек, окрашивающих воду в фиолетовый цвет:

Var styles = [ { "featureType": "water", "stylers": [ { "color": "#a73cff" } ] } ]
Применяем параметры:

Map.setOptions({styles: styles});
Для настройки стилей проще всего использовать специализированный сервис, к примеру Google Maps APIs Styling Wizard . Для детальной настройки карты жмем «More options»:

Производим настройку:

Копируем полученный json:

Если массив стилей очень большой, его можно поместить в отдельный.json файл и применить стили после его загрузки:

$.getJSON("../json/map-style/map-style.json", function(data) { map.setOptions({styles: data}); });
В конечном итоге получаем вот такие настройки карты:

Var coordinates = {lat: 47.212325, lng: 38.933663}, popupContent = this.$popupContent.html(), markerImage = "images/marker.png", zoom = 15, map = new google.maps.Map(document.getElementById("map"), { center: coordinates, zoom: zoom, disableDefaultUI: true }), infowindow = new google.maps.InfoWindow({ content: popupContent }), marker = new google.maps.Marker({ position: coordinates, map: map, icon: markerImage }); $.getJSON("../json/map-style/map-style_colored.json", function(data) { map.setOptions({styles: data}); }); google.maps.event.addListener(infowindow,"closeclick",function(){ marker.setAnimation(google.maps.Animation.BOUNCE); }); marker.addListener("click", function () { marker.setAnimation(null); }); marker.addListener("click", function() { infowindow.open(map, marker); }); infowindow.open(map, marker);
Кастомизация элементов управления

Кнопки «Карта» и «Спутник» находятся в блоке с классом.gm-style-mtc

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

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

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

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

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

На странице создаем элемент внутри которого у нас будет отображаться карта Google Maps.

Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице.

Подключаем библиотеку Google Maps Api, чтобы создать карту и управлять ей. Без этой библиотеки карта не заработает.

Пишем скрипт который создаст и отобразит карту Google Maps на странице.

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

01 - My Google Map #map { width: 100%; height: 500px; } // Определяем переменную map var map; // Функция initMap которая отрисует карту на странице function initMap() { // В переменной map создаем объект карты GoogleMaps и вешаем эту переменную на map = new google.maps.Map(document.getElementById("map"), { // При создании объекта карты необходимо указать его свойства // center - определяем точку на которой карта будет центрироваться center: {lat: -34.397, lng: 150.644}, // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города. zoom: 8 }); }

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

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

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

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

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

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

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

// Создаем маркер на карте var marker = new google.maps.Marker({ // Определяем позицию маркера position: {lat: 55.760186, lng: 37.618711}, // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты) map: map, // Пишем название маркера - появится если навести на него курсор и немного подождать title: "Наш маркер: Большой театр" });

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

Как добавить событие по клику на карту или маркер в 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 карт. И позволяет делать вот такие крутые карты:

Я выбрал стиль карты который называется 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"}]}] });

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

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

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

Создать само окно и контент внутри него

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

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

4.1 Опишем контент инфо-окна: // Создаем наполнение для информационного окна var contentString = ""+ ""+ ""+ "Большой театр"+ ""+ "

Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр - один из крупнейших" + "в России и один из самых значительных в мире театров оперы и балета.

"+ "

Веб-сайт: bolshoi.ru"+ "

"+ ""+ ""; 4.2 Создадим инфо-окно // Создаем информационное окно var infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 400 }); 4.3 Делаем так чтобы по клику на маркер — появлялось инфо-окно // Создаем прослушивание, по клику на маркер - открыть инфо-окно infowindow marker.addListener("click", function() { infowindow.open(map, marker); });

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

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

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

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

Изменяем стили оформления карты Google Map. Также можно настроить отображение маркера, скрыть либо добавить объекты на карту.

Подключение скрипта Google Maps API

Подключаем скрипт добавляющий функционал добавления и редактирования карт на сайте.
Добавление карты - т.е. уже не нужно добавлять карту в виде iframe, мы создаем карту на сайте по координатам.

YOUR_API_KEY - сюда нужно скопировать сгенерированный ключ API. Его нужно создать под своей учеткой в Google API Console
В итоге мы получим код ключа, его нужно вставить в скрипт подключения Google Maps API.

Создание карты Google Maps

В верстке у нас должен быть пустой div с id=»map» (можно назначить свой id), должны быть прописаны базовые стили слоя map. !Это обязательно, без этого карта не загрузиться.

#map {width: 100%; height: 400px;}

Инициируем скрипт создания карты

function initMap() { // Метка на карте + координаты var myLatLng = {}; // Настройки карты var map = new google.maps.Map(document.getElementById("map"), { zoom: 16, center: myLatLng, // Координаты и центрирование по метке disableDefaultUI: true, mapTypeControl: true, styles: [{ featureType: "all", stylers: [{ saturation: -100 } ] }, { featureType: "all", stylers: [{ lightness: -20 } ] }, { featureType: "all", stylers: [{ gamma: 0.5 } ] }, { featureType: "road", stylers: [{ gamma: 0.85 } ] }, { featureType: "road.arterial", stylers: [{ gamma: 2.6 } ] }, { featureType: "road.highway", stylers: [{ lightness: 1 } ] }, { featureType: "road.highway", stylers: [{ gamma: 4 } ] } ] }); // Настройки метки var image = new google.maps.MarkerImage("/img/point.png", new google.maps.Size(130, 130), //размер изображения иконки в пикселях new google.maps.Point(0, 0), //позиционирование иконки new google.maps.Point(65, 65) //центр иконки); var marker = new google.maps.Marker({ position: myLatLng, icon: image, map: map, title: "Фитнес клуб PRIME" }); }

lat: 47.226517, lng: 39.7316219 - Широта и долгота объекта на карте. Как узнать координаты необходимой точки - воспользоватся сервисами определения координат:

Смещение центра

При необходимости мы можем немного сместить центр, чтобы метка находилась не по центру. Это может быть необходимо если мы помещаем рядом плашку с адресными данными.

//center: myLatLng, // комментируем центровку по метке center: {lat: 47.226517, lng: 39.7316219}, //немного корректируем данные

lat - смещение +вверх, -вниз
lng - смещение +вправо, -влево

Стили оформления карты и меток

Более подробно про стили, селекторы и метки расписано

Сервис по подбору цветовых схем для карт - snazzymaps.com . После того как подобрали необходимый вариант — копируем стили и заменяем styles от начала и до конца квадратных скобок.

Какие стили за что отвечают:

Styles: [ //{elementType: "geometry", stylers: [{color: "#ebe3cd"}]}, //земля в населенном пункте //{elementType: "labels.text.fill", stylers: [{color: "#523735"}]}, //подписи в населенном пункте (заливка) //{elementType: "labels.text.stroke", stylers: [{color: "#f5f1e6"}]}, //подписи в населенном пункте (обводка) { featureType: "administrative", // административные границы между областями и округами elementType: "geometry.stroke", stylers: [{color: "#c9b2a6"}] }, { featureType: "landscape.humanmade", // обводка домов и зданий elementType: "geometry.fill", stylers: [{color: "#d3be7e"}] }, { featureType: "landscape.humanmade", // обводка домов и зданий elementType: "geometry.stroke", stylers: [{color: "#c6b06c"}] }, { featureType: "administrative.land_parcel", // не понятно elementType: "geometry.stroke", stylers: [{color: "#dcd2be"}] }, { featureType: "administrative.land_parcel", // номера домов elementType: "labels.text.fill", stylers: [{color: "#ae9e90"}] }, { featureType: "landscape.natural", // земля вне населенных пунктов elementType: "geometry", stylers: [{color: "#dfd2ae"}] }, { featureType: "poi", // административные территории и здания (больницы, стадионы, кладбища) elementType: "geometry", stylers: [{color: "#dfd2ae"}] }, { featureType: "poi", // подписи к административным территориям и сданиям (больницы, стадионы, кладбища) elementType: "labels.text.fill", stylers: [{color: "#93817c"}] }, { featureType: "poi.park", // парки, скверы, газоны (внутри населенных пунктов) elementType: "geometry.fill", stylers: [{color: "#a5b076"}] }, { featureType: "poi.park", // подписи к паркам, скверам, газонам (внутри населенных пунктов) elementType: "labels.text.fill", stylers: [{color: "#447530"}] }, { featureType: "road", // второстепенные дороги elementType: "geometry", stylers: [{color: "#f5f1e6"}] }, { featureType: "road.arterial", // главные дороги elementType: "geometry", stylers: [{color: "#fdfcf8"}] }, { featureType: "road.highway", // трассы (может проходить в виде дороги по городу) elementType: "geometry", stylers: [{color: "#f8c967"}] }, { featureType: "road.highway", // обводка трасс elementType: "geometry.stroke", stylers: [{color: "#e9bc62"}] }, { featureType: "road.highway.controlled_access", // платные трассы elementType: "geometry", stylers: [{color: "#e98d58"}] }, { featureType: "road.highway.controlled_access", // обводка платных трасс elementType: "geometry.stroke", stylers: [{color: "#db8555"}] }, { featureType: "road.local", // название второстепенных дорог elementType: "labels.text.fill", stylers: [{color: "#806b63"}] }, { featureType: "transit.line", // жд пути elementType: "geometry", stylers: [{color: "#dfd2ae"}] }, { featureType: "transit.line", // не понятно elementType: "labels.text.fill", stylers: [{color: "#8f7d77"}] }, { featureType: "transit.line", // не понятно elementType: "labels.text.stroke", stylers: [{color: "#ebe3cd"}] }, { featureType: "transit.station", // аэропорты elementType: "geometry", stylers: [{color: "#dfd2ae"}] }, { featureType: "water", // водоемы elementType: "geometry.fill", stylers: [{color: "#b9d3c2"}] }, { featureType: "water", // подписи водоемов elementType: "labels.text.fill", stylers: [{color: "#92998d"}] } ]

• Tutorial

В первый раз столкнувшись с внедрением и кастомизацией Google Maps, я не нашел единой статьи, рассматривающей все необходимые моменты - информацию пришлось искать по крупицам, а что-то выдумывать самому. После чего и было решено написать эту статью, чтобы люди, ранее не работавшие со стилизацией Google Maps, но при этом ограниченные временными рамками (а может, и желанием) для полноценного изучения API, смогли быстро получить необходимую информацию и материалы. Тем более, что и те, кто обладает определенным опытом, смогут почерпнуть для себя из этой статьи какую-нибудь интересную фишку, к примеру - параллакс для элементов информационного окна.

В этой статье мы рассмотрим:

1. Внедрение Google Maps на сайт

• Добавление через вставку iframe в разметку
• Добавление через API

2. Кастомизация маркера

• Инициализация маркера
• Анимация маркера
• Изображение маркера

• Добавление информационного окна
• Открытие информационного окна
• Кастомизация элементов информационного окна
• Параллакс-эффект для элементов в информационном окне

4. Кастомизация карты

• Изменение цвета объектов карты
• Кастомизация элементов управления
• Маска для карты

1. Внедрение на сайт

Добавление через вставку iframe в разметку

Если у вас нет необходимости изменять маркер, делать кастомное информационное окно или еще каким-либо образом воздействовать на карту, для ее добавления достаточно сделать следующее:

Добавление через API

Но если необходимо произвести какие-либо манипуляции, нам понадобится ключ. Если его нет рядом, можно получить тут: ссыль

Встраиваем его в адрес вместо YOUR_API_KEY:

Если нужно вызывать коллбэк после загрузки api, после ключа надо будет дописать YOUR_API_KEY&callback=initMap с названием вашей функции. Подключаем скрипт на странице и создаем в разметке блок для будущей карты:

Теперь необходимо инициализировать карту:

Function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, map = new google.maps.Map(document.getElementById("map"), { center: coordinates }); }
Координаты можно узнать при помощи опции «Что здесь», описанной выше.

Свойства, которые могут сразу понадобиться:

• zoom: number - определяет первоначальный масштаб.
• disableDefaultUI: boolean – убирает элементы управления.
• scrollwheel: boolean - отключает масштабирование колесиком мыши (бывает полезно, если карта на всю ширину страницы и перебивает прокрутку вниз).

2. Кастомизация маркера

Инициализация маркера

Для начала добавим маркер:

Function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, map = new google.maps.Map(document.getElementById("map"), { center: coordinates }), marker = new google.maps.Marker({ position: coordinates, map: map }); }
position (обязательно) указывает начальное положение маркера. Если указать те же координаты, что и для карты, то маркер будет по центру экрана. Сместить маркер можно изменив значение координат, либо сменив положение самой карты относительно видимой области (родительского блока).
map (не обязательно) указывает карту, на которой помещается маркер.

Анимация маркера

Для маркера можно задать анимацию:

• DROP – после загрузки карты маркер падает сверху.
• BOUNCE – маркер подпрыгивает на месте.

function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, map = new google.maps.Map(document.getElementById("map"), { center: coordinates }), marker = new google.maps.Marker({ position: coordinates, map: map, animation: google.maps.Animation.BOUNCE }); }
Анимацию можно задать при инициализации маркера, добавить или убрать, вызвав метод setAnimation() .

Пример анимации маркера при закрытии информационного окна и прекращении при открытии:

Google.maps.event.addListener(infowindow,"closeclick",function(){ marker.setAnimation(google.maps.Animation.BOUNCE); }); marker.addListener("click", function () { marker.setAnimation(null); });
Изображение маркера

Изображение маркера можно изменить, задав адрес картинки для свойства icon .

Image = "images/marker.png", marker = new google.maps.Marker({ position: coordinates, map: map, icon: image });
3. Кастомизация информационного окна

Добавление информационного окна

В кастомное информационное окно можно добавить любую разметку через свойство content:

Function initMap() { var coordinates = {lat: 47.212325, lng: 38.933663}, popupContent = "

Что угодно

", markerImage = "images/marker.png", map = new google.maps.Map(document.getElementById("map"), { center: {lat: 47.212325, lng: 38.933663} }), marker = new google.maps.Marker({ position: coordinates, map: map, icon: markerImage }), infowindow = new google.maps.InfoWindow({ content: popupContent }); }
Открытие информационного окна

Чтобы информационное окно было видно сразу, надо вызвать метод open() :

Infowindow.open(map, marker);
Также следует добавить вызов окна при клике на маркер (в противном случае мы не сможем открыть попап):

Marker.addListener("click", function() { infowindow.open(map, marker); });
Кастомизация элементов информационного окна

Информационное окно может быть как кастомное, так и стандартное. В кастомное мы можем добавить любые элементы и работать с ними, возможности ограничены лишь фантазией.

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

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

Gm-style-iw { background: $black; box-shadow: -14px 0px 0px $black, -14px 9px 0px $black, -14px -8px 0px $black, 15px -8px 0px $black, 15px 9px 0px $black; }
Но обо всем по порядку:

Gm-style-iw - основной блок, в нем находится контент. На скриншоте, расположенном выше, этот блок имеет черный фон.
.poi-info-window - обертка для текста в стандартном информационном окне, находится внутри. .gm-style-iw
.gm-style-iw + div – крестик.

Как теперь повлиять на область вне блока контента? Выйти за его пределы. В первую очередь надо добавить свойство, которое сделает видимыми блоки, выходящие за границы:

Gm-style-iw { overflow: visible !important; div { overflow: visible !important; } }
Теперь для.gm-style-iw , или блоков внутри можно создать псевдоэлементы для перекрытия фона и стрелочки:

Gm-style-iw { // Фон &::before { content: ""; width: calc(100% + 29px); height: calc(100% + 17px); @include absolute; @include center-align; background: $black; } // Стрелочка &::after { content: ""; width: 0; height: 0; border: 22px solid transparent; border-top-color: $black; z-index: 4; @include absolute; top: auto; bottom: -53px; margin: auto; } }
Получаем следующее:

Параллакс-эффект для элементов в информационном окне

Тут возникает небольшая проблема, связанная с тем, что объекты карты создаются динамически, и нельзя просто так взять и прикрепить к ним обработчик, а клонировать блок при помощи.clone(true) в контент информационного окна с переносом обработчиков нам не позволит API.

Как вариант, можно проверять наличие элемента и сохранять после появления:

Var $parallaxImg = null; this.$body.mousemove(function(e) { if($parallaxImg) { ... } else if($(this.parallaxImg).length) { $parallaxImg = $(this.parallaxImg); } }.bind(this));
Теперь просто добавим код, смещающий блок по горизонтали в зависимости от положения курсора:

Var $parallaxImg = null; this.$body.mousemove(function(e) { if($parallaxImg) { var $el = $(e.currentTarget), xPos = e.pageX - (window.innerWidth / 2), mXPcnt = Math.round(xPos / $el.width() * 100), diffX = $parallaxImg.width() - $el.width(), myX = diffX * (mXPcnt / 1500); $parallaxImg.animate({left: myX}, 0); } else if($(this.parallaxImg).length) { $parallaxImg = $(this.parallaxImg); } }.bind(this));
Если клик по динамическому элементу нужно обработать, просто ставим обработчик на обертку и ловим объект на всплытии:

$(".map").on("click", ".js-parallax-img", function() { ... });
4. Кастомизация карты

Изменение цвета объектов карты

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

Пример настроек, окрашивающих воду в фиолетовый цвет:

Var styles = [ { "featureType": "water", "stylers": [ { "color": "#a73cff" } ] } ]
Применяем параметры:

Map.setOptions({styles: styles});
Для настройки стилей проще всего использовать специализированный сервис, к примеру Google Maps APIs Styling Wizard . Для детальной настройки карты жмем «More options»:

Производим настройку:

Копируем полученный json:

Если массив стилей очень большой, его можно поместить в отдельный.json файл и применить стили после его загрузки:

$.getJSON("../json/map-style/map-style.json", function(data) { map.setOptions({styles: data}); });
В конечном итоге получаем вот такие настройки карты:

Var coordinates = {lat: 47.212325, lng: 38.933663}, popupContent = this.$popupContent.html(), markerImage = "images/marker.png", zoom = 15, map = new google.maps.Map(document.getElementById("map"), { center: coordinates, zoom: zoom, disableDefaultUI: true }), infowindow = new google.maps.InfoWindow({ content: popupContent }), marker = new google.maps.Marker({ position: coordinates, map: map, icon: markerImage }); $.getJSON("../json/map-style/map-style_colored.json", function(data) { map.setOptions({styles: data}); }); google.maps.event.addListener(infowindow,"closeclick",function(){ marker.setAnimation(google.maps.Animation.BOUNCE); }); marker.addListener("click", function () { marker.setAnimation(null); }); marker.addListener("click", function() { infowindow.open(map, marker); }); infowindow.open(map, marker);
Кастомизация элементов управления

Кнопки «Карта» и «Спутник» находятся в блоке с классом.gm-style-mtc