Изменяем стили оформления карты Google Map. Также можно настроить отображение маркера, скрыть либо добавить объекты на карту.
Подключение скрипта Google Maps API
Подключаем скрипт добавляющий функционал добавления и редактирования карт на сайте.
Добавление карты — т.е. уже не нужно добавлять карту в виде iframe, мы создаем карту на сайте по координатам.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap" async defer></script>
YOUR_API_KEY — сюда нужно скопировать сгенерированный ключ API. Его нужно создать под своей учеткой в Google API Console
В итоге мы получим код ключа, его нужно вставить в скрипт подключения Google Maps API.
Создание карты Google Maps
В верстке у нас должен быть пустой div с id=»map» (можно назначить свой id), должны быть прописаны базовые стили слоя map. !Это обязательно, без этого карта не загрузиться.
#map {width: 100%; height: 400px;}
Инициируем скрипт создания карты
<script>
function initMap() {
// Метка на карте + координаты
var myLatLng = {lat: 47.226517, lng: 39.7316219};
// Настройки карты
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'
});
}
</script>
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'}]
}
]
А можно в редакторе Google настроить карту и скопировать стили.
Возможные ошибки
Если карта не появляется — нужно обязательно прописать в стилях ее высоту.
Предупреждение SignedInNotSupported. Из скрипта с подключением Google API нужно убрать &signed_in=true (устаревший параметр).
