Итак, вам надоели эти стили по-умолчанию в 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.