Современные стилизированные карты с помощью Google у Вас на сайте
Этот замечательный урок подробно расскажет про стилизацию для самого популярного сервиса от Google – карты.
Когда речь идет о местоположении собственной организации, то карты от Google приходят на помощь. Стандартные цвета могут сильно отличаться от дизайна Вашего персонального сайта компании, вот поэтому в этом уроке и будет рассмотрена стилизация карты.
Этот урок поможет создать основной цвет карты, а также насыщенность.
Подготовительный этап – создание каркаса
Для начала создадим контейнер section #google-map, в который поместим карту от сервиса Google. Соответственно кнопки #zoom-in и #zoom-out для уменьшения или увеличения масштаба карты поместим отдельно.
<section id="google-map">
<-- сам контейнер карты -->
<div id="google-container"></div>
<!-- поменять масштаб карты -->
<div id="zoom-in"></div>
<div id="zoom-out"></div>
<address>Полный адрес</address>
</section>
Соответствующие кнопки #zoom-in, а также #zoom-out добавим на карту, используя возможности библиотеки jQuery.
Далее все просто, подключим соответствующую библиотеку API сервисов карт Google перед закрывающимся тегом на страничке <body>, как-то так:
<script src="https://maps.googleapis.com/maps/api/js?key={А_ТУТ_АПИ_КЛЮЧ}"></script>
Секретный ключ { А_ТУТ_АПИ_КЛЮЧ} можно получить по соответствующему адресу сервисов Google.
Подстраиваем саму стилизацию
Задаем ширину 100 процентов (свойство width); элементу section#google-map (а так же элементу div#google-container), чтобы карта «тянулась» на всю область видимости нашего экрана. Так же добавим общие стили кнопкам #zoom-in и #zoom-out соответственно.
Стиль самих карт таким же образом можно задавать, используя самую популярную библиотеку jQuery.
Отметим следующий момент: на маленьких экранах мы уменьшим саму высоту карты, чтобы прокручивалась не страничка, а сама карта Вашей организации.
Пишем обработку событий
var latitude = координата 1,
longitude = координата 2,
map_zoom = 14;
// своя собственная иконка - .png для Internet Explorer 11 соответственно
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 картинки нужно использовать для Internet Explorer 11.
Задаём основной цвет нашей карте, а также другие важные цветовые параметры нашей карты:
var main_color = '#000000',
saturation_value= -30,
brightness_value= 10;
Чуть дальше идут параметры, которые отвечают за стилизацию, то есть цветовую гамму карты.
var style= [
{
featureType: 'тип карты',
elementType: 'тип элементов карты',
stylers: [
{visibility: "отключить"}
]
},
{
featureType: "тип карты",
elementType: "типы элементов карты",
stylers: [
{ hue: параметр },
{ visibility: "on" },
{ lightness: значение },
{ saturation: значение }
]
},
// другие элементы стиля тут
];
На самом деле параметров много и посмотреть их можно на официальном сайте Google в документации.
Успехов!
Похожие статьи
В мире современных технологий и цифровых инноваций, данные играют ключевую роль в принятии решений, оптимизации бизнес-процессов и понимании...
Когда вы создали сайт, то естественно для дальнейшего развития вам нужно воспользоваться услугами продвижения и раскрутки. У многих возникает...
На протяжении последних пятнадцати лет отличным инструментом Интернет-маркетинга было и остается старое доброе SEO – продвижение сайта в Гугл и в...
Аудит сайта весьма похож на аудит компании, его основная цель - это сбор и анализ информации для того, чтобы на ее основании составить...
Хостинг - место на сервере, которое позволяет публиковать ваш сайт в сети интернет. Сервер хранит данные вашего сайта в интернете, обрабатывает...
Определяя цели, заказчик проекта по продвижению сайта в ТОП должен понимать, что первые из перечня выступают практически недостижимыми. Данный факт...
Пришло время оплачивать работы по SEO и вас, как и каждого заказчика, может смущать факт полной предоплаты за услуги. «Я заплачу, а что они будут...
На данный момент организации и предприятия имеют возможность активно использовать для своего продвижения следующие виды интернет-услуг...
Покупка серверного оборудования требует предельно серьезного подхода. Если вы хотите купить сервер, который будет отвечать всем вашим требованиям,...
Возникла задача увеличить посещаемость ресурса по коммерческим вопросам и привлечь на сайт целевой трафик, с максимальным ростом оформленных...
Партнерские программы и способы раскрутить свой сайт с их помощью все это и многое другое в узнаете на сайте информационного портала Лидзавод.
Принимая решение разработать мобильное приложение для бизнеса, вы не в последнюю очередь интересуетесь стоимостью реализации подобного проекта. В...
