Добавляем карту 2GIS на свой лендинг или сайт
Очень часто на своих сайтах программисты используют карты Google Maps, Яндекс Карты и 2GIS, но не все умеют правильно их вставлять и тогда они прибегают к скриншотам карт, что очень снижает функционал какты.
В этой статье я буду использовать карты 2GIS, так как они очень детально проработаны, в отличие от других карт.
Подключаем API
Начнем с самого главного - подключим API карты к странице, это делается путем добавления в шапку (она находится внутри тегов <head> </head>), следующих строк:
<head> <!-- Добавляем скрипт 2gis --!> <script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full&lazy=true" data-id="dgLoader"></script> <script src="map.js" ></script> </head>
В строке 4 содержится сам API. А строка 5 это наш скрипт карты, который мы напишем чуть ниже.
Создаем контейнер для карты
Для создания контейнера, в котором будет отображаться карта, необходимо добавить блочный HTML-элемент необходимого вам размера:
<body>
<div id="gis_map" style="width:500px; height:400px"></div>
</body>
Создаем карту
Теперь перейдем к написанию скрипта своей будущей карты.
map.js
jQuery(window).load(function () {
"use strict";
DG.then(function () {
var gisMap = DG.map('gis_map', {
'center': [43.569647, 39.748637],
'zoom': 17,
fullscreenControl: false,
scrollWheelZoom: false
});
DG.marker([43.569537, 39.748637]).addTo(gisMap).bindPopup('<div style="line-height: 16px;"><b>Эпсилон Медиа Веб, ООО</b><br><span style="font-size: 11px; color: #aaa;">Сочи, Яна Фабрициуса, 2/9а</span></div>');
});
});
Теперь разберем все, что тут написали.
Первая строка означает, что скрипт будет загружен только после полной загрузки страницы, тем самым карта будет загружаться в последнюю очередь и не будет мешать. Редко, но бывает такое, что домен maps.api.2gis.ru не отвечает, что приводит к невозможности загрузки API библиотеки. Именно поэтому я рекомендую все сторонние скрипты загружать в последнюю очередь.
Вторую строку "use strict;" не имеет смысла разбирать, она нужна, чтобы некоторые браузеры не ругались и не выпендривались.
Разберем строки 4-9, здесь мы создаем саму карту, gis_map - это идентификатор блочного HTML-элемента, который мы создали выше. Следующей строкой мы задаем координаты 43.569647, 39.748637, по которым будет отцентрована карта. В строке 6 указываем масштаб увеличения карты 'zoom': 17, число 17 указывает на коэффициент масштабирования. Строка 7 fullscreenControl: false убирает кнопку "Во весь экран". В строке 8 мы отключаем масштабирование карты колесиком мыши. Эта функция иногда раздражает, если вы скролите сайт и по пути натыкаетесь на карту, при этом карта начинает масштабироваться, что заставляет лично меня думать, что сайт делали дилетанты, а следовательно и доверие к сайту падает.
Строка 10 довольно большая, но не очень сложная как кажется на первый взгляд. В ней мы устанавливаем координаты маркера marker([43.569537, 39.748637]), который будет отображать местоположение вашего офиса, дома или чего-то еще. addTo(gisMap) - определяет на какую карту будет добавлен этот маркер, gisMap - это переменная, в которую мы поместили созданную выше карту. bindPopup("Тут текст") - этой функцией мы установим текст, который будет отображаться при клике на маркере.
Все готово, теперь если вы еще не загрузили файл map.js на свой сайт, то следует это сделать. После чего вы можете увидеть на своей странице карту, которую мы только что создали. Если у вас возникнут вопросы, не стесняйтесь, пишите мне на почту info@e-mw.ru или через форму обратной связи на странице контакты.
Данный урок подготовлен для вас командой сайта www.e-mw.ru.
Поделиться с друзьями: