Добавить свои стили к встроенным картам Google Maps

Итак, вам надоели эти стили по-умолчанию в Google Maps и вы хотите сделать свои карты уникальными, добавив им своих стилей, разукрасив в брендовые цвета вашего сайта и удалив лишние элементы? Добавить стилизированный маркер, всплывающую подсказку по клику на маркер? Ни слова больше!

План простой.

  1. Получение ключа Goole Maps API key
  2. Добавление скрипта карт на сайте
  3. Добавление скрипта встраивания и кастомизации карты.

Приступаем.

Как получить ключ/аутентификацию в Google Maps API?

Переходим по ссылке «Получение ключа/аутентификация», следуем инструкциям в разделе «Аутентификация для стандартного API – ключи API», которые сводятся только к нажатию на большую кнопку «Получение ключа» и в появившемся окне добавляем проект, выбираем его и активируем.

Google Maps API key

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

maps API key

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

Добавляем API карт на сайте и блок, где будет создана карта

Первым делом, добавим блочный элемент в страницу и назначим ему уникальный ID — <div id="map"></div>. В нем и будет создана карта.

Далее, где-нибудь в самом низу сайта, перед закрывающим тегом </body> нужно добавить скрипт карт следующим образом:

<code>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjef2YjzmuhB02sLGL12iybWQeNmOfuqY" onload="initMap()"></script>
</code>

Этот код добавит асинхронное подключение скрипта карт, а onload="initMap()" вызовет javascript-функцию, в которой мы и поместим инициализацию и стили нашей карты. Тут нюанс — если вы поместите эту функцию в подключаемом внешнем файле, нужно убедиться что он будет загружен до того, как загрузится файл с АПИ карт. Иначе ничего не сработает.

Я обхожу этот момент либо подключая функцию initMap() инлайново в страницу с картой, либо ее инициализацию ставлю не на загрузку скрипта карт, а на какое-то действие, которое точно произойдет после того, как все скрипты уже будут загружены. Например, на скролл к блоку с картой (живой пример — http://spartans.in.ua/#sixth — блок с картой в самом конце страницы, и пока посетитель проскроллит к нему, скрипты уже будут загружены). В таком случае будет еще плюс к скорости загрузки страницы (скорость сайта — вообще мой пунктик, есть даже пост на эту тему) — сама карта не загружается в первоначальной загрузке страницы, а загрузится только в случае совершения действия — скролла к блоку с картой.

Итак, сам скрипт создания и стилизации вашей карты. Комментарии в коде оставляю для тех, кому это нужно.

function initMap() {
  // тут задаем центр карты
  var myLatLng = {lat: 50.44973057721140, lng: 30.483638212303163};

  
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,  // определяет масштаб карты, ее "зум"
    center: myLatLng
  });

  // ниже задаются стили, можете использовать https://mapstyle.withgoogle.com/ или https://snazzymaps.com/ для быстрого создания стиля,
  // далее оттуда берете блок с кодом для стилей и вставляете вместо этого блока ниже
  var styles = [
    {
      stylers: [
        { hue: "#ff8d8d" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "poi.business",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // тут мы применяем описанные выше стили к карте
  map.setOptions({styles: styles});

  // блок ниже рисует path - путь, состоящий из линий. Так можно, к примеру, нарисовать путь проезда к вашему месту.
  var stoPathCoordinates = [
    {lat: 50.45059306386482, lng: 30.483474597553254},
    {lat: 50.45051620925655, lng: 30.48384474239731},
    {lat: 50.45010290011114, lng: 30.483753547290803},
    {lat: 50.4498006014667, lng: 30.483635530094148}
  ];
  var stoPath = new google.maps.Polyline({
    path: stoPathCoordinates,
    geodesic: true,
    strokeColor: '#ce563e',
    strokeOpacity: 0.75,
    strokeWeight: 2
  });

  stoPath.setMap(map);

  // ниже задаем маркер - картинку и ее размер, а также точку картинки (в примере - это низ картинки, выровненный по центру - которая будет находится в указанных координатах)
  var image = {
    url: '/wp-content/uploads/map-icon4.png',
    // тут маркер 30 пикселей в ширину и 118 в высоту
    size: new google.maps.Size(30,118),
    // задаем начало картинки, обычно это левый верхний угол (0, 0).
    origin: new google.maps.Point(0, 0),
    // и точка картинки, которая будет находиться в точке вашего объекта на карте, тут - центр картинки внизу (15, 118).
    anchor: new google.maps.Point(15, 118)
  };

  // тут создается блок, всплывающий по клику на маркер. Удобен чтоб добавить небольшой текст-описание или подсказку.
  var contentString = '<div id="map-content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">СТО "Спартанців"</h2>'+
    '<div id="bodyContent">'+
    '<p>Вїзд через шлагбаум з боку вул. В.Чорновола, ' +
    'далі праворуч до вїзду у власне саме СТО.'+
    'Переключення на супутникову версію мапи може допомогти '+
    'краще розібратись із розташуванням.'+
    '</div>'+
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 270
  });

  // здесь создается сам маркер и применяются параметры отображения
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    animation: google.maps.Animation.DROP,
    title: 'СТО "Спартанців"'
  });

  var myOptions = {
    // your other options...
    draggable: !("ontouchend" in document)
  };

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

Пример работы такого скрипта я уже давал выше — это сайт С.Т.О «Спартанцев», сделанный точно по стилям из скрипта.

И как заключение — всю информацию для создания такой стилизованной карты можно найти в официальном руководстве Google по Maps JavaScript API.