Итак, вам надоели эти стили по-умолчанию в Google Maps и вы хотите сделать свои карты уникальными, добавив им своих стилей, разукрасив в брендовые цвета вашего сайта и удалив лишние элементы? Добавить стилизированный маркер, всплывающую подсказку по клику на маркер? Ни слова больше!
План простой.
Приступаем.
Переходим по ссылке «Получение ключа/аутентификация», следуем инструкциям в разделе «Аутентификация для стандартного API – ключи API», которые сводятся только к нажатию на большую кнопку «Получение ключа» и в появившемся окне добавляем проект, выбираем его и активируем.
Далее, после активации вы увидите ключ, который вам нужно скопировать и воспользоваться им в подключении скрипта API карт.
В общем-то, если вы не используете карту на очень посещаемом проекте, или если не нужны какие-либо ограничения по безопасности (запрет на использование вашего ключа только на домене вашего сайта, к примеру), то можете смело использовать 1 ключ на нескольких сайтах. Проблем у меня в такой ситуации не было.
Первым делом, добавим блочный элемент в страницу и назначим ему уникальный 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.