/ Сайтостроение / Адаптивность / Изменить стиль карты Google Map

Изменить стиль карты Google Map

HIT

Изменяем стили оформления карты 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 (устаревший параметр).

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Посты — метки на карте

Посты — метки на карте

Пытаясь реализовать удобный функционал по созданию меток на интерактивной карте я пришел к следующей системе. Заводим произвольный тип записи и таксономии чтобы структурировать и удобно манипулировать городами и точками. Основа Читать далее »

API Яндекс.Карт

API Яндекс.Карт

Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через iframe, т.к. в нем не будет никаких настроек. Необходимо подключить API Яндекс.Карт Подключаем API Яндекс.Карт На данный Читать далее »

Карта на сайт

Карта на сайт

Для добавления интерактивной карты в раздел контакты, нужно поместить в страницу или шаблон сгенерированный код Yandex карты, Google Map, или 2GIS. На данной странице я собрал популярные решения по добавлению Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Изменить стиль карты Google Map Изменить стиль карты Google Map
Автоматическая разбивка записей по тегам
Рекомендации для васАвтоматическая разбивка записей по тегамOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.