Изначально данная заметка задумывалась как "Установка карты на API Яндекс", но Яндекс ввел ключи для своих API, а это дополнительная заморочка с получением этого самого ключа (иметь аккаунт, указать телефон, описать сайт и т.д).
На данный момент карты на API Яндекса работают и без ключей, но как долго это продлится никто не знает.
В тоже время, карты от 2ГИС ничем не хуже, а изначальной задачей была именно быстрая настройка и установка карты.
Подключаем API 2ГИС:
|
1 |
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script> |
Создаем контейнер для карты:
|
1 |
<div id="map" style="width:100%; height:400px"></div> |
Создаем карту, маркер и попап с информацией:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> var map; DG.then(function () { map = DG.map('map', { center: [51.576069, 45.972698], /* Координаты центра карты */ zoom: 16, /* Масштаб */ scrollWheelZoom: false /* Запрет прокрутки карты колесом мыши */ }); mapicon = DG.icon({ iconUrl: 'marker.png', /* Иконка маркера */ iconAnchor: [32, 64], popupAnchor: [0, 24], className: 'map-icon', iconSize: [64, 64] /* Размер иконки */ }); DG.marker([51.576069, 45.972698], {icon: mapicon}).addTo(map).bindPopup('<div class="map-popup"><h2>ATUIN</h2><br/>Быстрая настройка и установка<br/>карты на <b>API 2ГИС</b></div>'); /* Координаты маркера и текст попапа */ }); </script> |
Чтобы узнать координаты, открываем карту 2ГИС и нажимаем на нужную нам точку.
В адресной строке будет нечто похожее на:
https://2gis.ru/saratov/firm/70000001020023829%2C45.972698%2C51.576069?queryState=center%2F45.972982%2C51.576116%2Fzoom%2F18
[51.576069, 45.972698] - это и есть наши координаты
Еще один вариант найти координаты - это открыть карту на Яндексе, на нужной нам точке нажать правую кнопку мыши и выбрать "Что здесь". В появившемся окошке будет написана широта и долгота.
Добавляем стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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; /* Убираем отступы у попапа */ } |
Далее остается только подобрать маркер для нашей карты, например этот: marker.png
я должен взять кординаты с $_GET что мне делать подскажите
Брать данные с урла и вставлять в карту, например:
Хорошо бы определять координаты по адресу.