Установка карты на api 2гис

Быстрая настройка и установка на сайт карты на API 2ГИС

Пример:

Более подробную информацию о настройке карты можно найти на API карт 2ГИС

Самый быстрый способ установить на сайт карту — это воспользоваться констурктором Яндекса, но он имеет ряд недостатков:

  1. стандарное оформление
  2. карта привязывается к аккаунту на Яндексе
  3. работает менее стабильно

В этой заметке рассмотрим, как установить карту с использованием API 2ГИС и потерять на этом не более 10 минут.

Изначально данная заметка задумывалась как "Установка карты на API Яндекс", но Яндекс ввел ключи для своих API, а это дополнительная заморочка с получением этого самого ключа (иметь аккаунт, указать телефон, описать сайт и т.д).

На данный момент карты на API Яндекса работают и без ключей, но как долго это продлится никто не знает.

В тоже время, карты от 2ГИС ничем не хуже, а изначальной задачей была именно быстрая настройка и установка карты.

Подключаем API 2ГИС:

<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>

Создаем контейнер для карты:

<div id="map" style="width:100%; height:400px"></div>

Создаем карту, маркер и попап с информацией:

var map;
DG.then(function () {
map = DG.map('map', {
center: [66.660119, 66.383776], /* Координаты центра карты */
zoom: 16, /* Масштаб */
scrollWheelZoom: true
/*scrollWheelZoom: false /* Запрет прокрутки карты колесом мыши */
}); 
mapicon = DG.icon({
iconUrl: 'https://tjan.ru/images/svg/maps1.svg', /* Иконка маркера */
iconAnchor: [32, 64], 
popupAnchor: [0, 24],
className: 'map-icon',
iconSize: [64, 64] /* Размер иконки */
});
DG.marker([66.660119, 66.383776], {icon: mapicon}).addTo(map).bindPopup('<div class="map-popup"><h2>TJAN.RU</h2><br/>Лайфхаки для админа</div>');/* Координаты маркера и текст попапа */
});

Чтобы узнать координаты, открываем карту 2ГИС и нажимаем на нужную нам точку.

В адресной строке будет нечто похожее на: https://2gis.ru/geo/70030076216150753/66.383419%2C66.660228?m=66.38582%2C66.659248%2F16.25 [66.659248, 66.38582] - это и есть наши координаты.

Еще один вариант найти координаты - это открыть карту на Яндексе, на нужной нам точке нажать правую кнопку мыши и выбрать "Что здесь". В появившемся окошке будет написана широта и долгота.

Добавляем стили:

.map-popup {
background: #FFF;
width: 300px;
padding: 20px;
color: #000;
border: 3px solid #337AB7;
box-sizing: border-box;
}
.map-popup h2 {
margin: 0;
font-size: 22px;
color: #337AB7;
}
.map-icon {
visibility: visible!important; /* Оставляем иконку видимой при открытии попапа */
display: inline!important;
}
.leaflet-popup-tip-container {
display: none!important; /* Убираем родной указатель при открытом попапе */
}
.leaflet-popup-content {
margin:0!important;/* Убираем отступы у попапа */
}

Далее остается только подобрать маркер для нашей карты, например этот: maps1