Стилизованные карты Google

demosourse

В этом уроке мы реализуем собственную стилизацию для карт Google.

Когда речь заходит о каком-то адресе, карты Google — это как раз то что нужно. Создание новой карты не занимает больше минуты!

Однако стандартные цвета карты могут отличаться от общей стилистики вашего сайта.

В этом уроке мы расскажем как задать основной цвет карты (плюс насыщенность и уровень яркости).

Создание структуры

Мы создали контейнер section#cd-google-map, в который поместили карту Google. Кнопки #cd-zoom-in и #cd-zoom-out для масштабирования поместим отдельно.

<section id="cd-google-map">
    <!-- #google-container will contain the map  -->
    <div id="google-container"></div>
    <!-- #cd-zoom-in and #zoom-out will be used to create our custom buttons for zooming-in/out -->
    <div id="cd-zoom-in"></div>
    <div id="cd-zoom-out"></div>
    <address>86-90 Paul Street, London, EC2A 4NE</address>
</section>

Кнопки #cd-zoom-in и #cd-zoom-out добавим на карту, используя jQuery.

Далее подключим библиотеку Google Map API перед закрывающимся тегом body:

<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}"></script>

Заметка: {YOUR_API_KEY} вам нужно заменить на свой собственный ключ (тут вы можете получить свой API ключ).

Стили

Зададим width: 100%; элементу section#cd-google-map (а так же div#google-container), чтобы карта занимала всю ширину области видимости экрана. Так же добавим общие стили кнопкам #cd-zoom-in/#cd-zoom-out.

Стиль карт так же зададим, используя jQuery.

Отметим: на небольших экранах мы уменьшим высоту карты, чтобы прокручивалась не страница, а сама карта.

Обработка событий

Для начала зададим основные параметры для карт Google:

var latitude = 51.5255069,
longitude = -0.0836207,
map_zoom = 14;

// своя иконка - .png для IE11
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg';

Используем svg изображение маркера; png для IE11.

Задаём основной цвет карте и другие цветовые параметры:

var	main_color = '#2d313f',
	saturation_value= -20,
	brightness_value= 5;

Данные значения отвечают за цветовую гамму карты:

var style= [
	{
        featureType: 'road.highway',
        elementType: 'labels',
        stylers: [
            {visibility: "off"}
        ]
    },
	{
		featureType: "road.highway",
		elementType: "geometry.fill",
		stylers: [
			{ hue: main_color },
			{ visibility: "on" },
			{ lightness: brightness_value },
			{ saturation: saturation_value }
		]
	},

	// other elements style here
];

Полный список параметров к картам Google можно найти в документации.

Заметка: значение параметра scrollwheel будет false, чтобы отключить масштабирование карты при прокрутке колеса мыши.

Напоследок добавляем кнопки #cd-zoom-in/#cd-zoom-out (для этого определяем функцию CustomZoomControl); помещаем их в левом верхнем углу карты:

map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/custom-google-map/
Перевел: Станислав Протасевич
Урок создан: 21 Февраля 2016
Просмотров: 9391
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^