Карты Google часто используются не только для того, чтобы найти дорогу, но и для того, чтобы указать на карте расположение офиса, или сети магазинов. При этом часто цвета карты, которую вставляют на сайт не подходят по дизайну. К счастью, API карт Google позволяет менять цветовую палитру, добавлять свою иконку маркера на карту и т.д.
Предположим, что нам нужно разместить на сайте карту Google с отмеченными на ней маркерами магазинами. Само собой, карта должна по цветовой гамме соответствовать сайту, иметь пользовательские маркеры (адаптированные под retina-устройства) и... Впрочем, смотрите сами:
Здесь нужен лишь один общий контейнер, в котором будет размещаться сама карта и список адресов, который можно скроллить:
<section class="map">
<!-- Карта Google -->
<div class="map__google" id="map"></div>
<!-- Адреса магазинов -->
<div class="map__adress_list" id="map_list"></div>
</section>
Хотя использование карт Google не вызывает проблем, без дополнительных библиотек в этом случае не обойтись. Нам понадобятся jQuery, плагин для скроллинга адресов mCustomScrollbar и библиотека GMAP3 для упрощения работы с картами. Предположим, что данные приходят к нам в JSON-формате вот в таком виде:
{
"name":"Название магазина",
"logo":"Логотип",
"site":"Адрес сайта",
"address":"Адрес магазина"
}
Тогда мы можем их вывести так:
$.each(data, function (key, val) {
// функции
})
Начинаем работать с картами Google
Подключим наши библиотеки, написав перед закрывающим тегом body следующее:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.mCustomScrollbar.js"></script>
<script src="js/gmap3.min.js"></script>
Теперь давайте перекрасим нашу карту) Например, если мы хотим убрать обозначения дорог, но сами дороги оставить, то нам необходимо прописать 2 свойства:
var gmapStyles = [
{
//Скрываем обозначение дорог на карте
featureType: 'road.highway',
elementType: 'labels',
stylers: [
{visibility: "off"}
]
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: "значение" },
{ saturation: "значение" }
]
}
Полный список всех свойств можно узнать в документации по использованию карт Google, а мы напишем в main.js те свойства, которые нам нужны. Скачайте прилагаемые материалы к уроку и изучите их, а мы пойдем дальше.
Определение широты и долготы на карте Google
Чтобы определить долготу и широту, Вам необходимо найти нужный объект на карте Google, а затем кликнуть правой кнопкой мыши, а затем нажать "Что здесь?". Внизу Вы увидите всплывающее окошко, где будет указана долгота и широта. Если вы наведете на них курсором мыши, на объекте, соответствующем этим координатам, появится маркер с расходящимися кругами.
Итак, давайте передадим в нашу функцию выбранные широту и долготу, относительно которых будет центрироваться карта, и данные о магазинах:
(function (fLatitude, fLongitude,data){
})(55.7558,37.6176,data)
Вывод раскрашенной карты Google на экран
У нас есть все данные чтобы вывести карту в блок <div id="map">
if (typeof google != 'undefined') {
// Выводим карту
$map = $('#map');
$map.gmap3({
map: {
options: {
center: [fLatitude, fLongitude],
mapTypeControl: false,
scaleControl: true,
scrollwheel: false,
navigationControl: false,
streetViewControl: false,
disableDefaultUI: true,
zoom: 10, // масштаб карты
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: gmapStyles // стили карты
}
},
defaults:{
verbose: false,
queryLimit: {
delay: 0,
random: 0
}
}
});
// перебираем JSON чтобы вывести маркеры на
// карте и магазины в блоке с id = shop_items
$.each(data, function (key, val) {
renderMap(key, val); // выводим маркеры
txt+=createShopList(key, val); // магазины
});
$("#shop_items").html(txt).mCustomScrollbar();
}
Функции renderMap и createShopList просты в написании и не требуют разъяснений. Поясним лишь свойства callback и click. Сюрприииииииз) Я решил добавить функционал, при котором при клике на маркер или адрес магазина в списке, маркер и список будут выделяться, причем напротив маркера будет выскакивать попап! На этом мы заканчиваем рассказывать как использовать карты Google. Удачи, смотрите пример.