Доступность Яндекс Карт. Встраивание Яндекс Карт
Бесплатны ли Яндекс Карты и если да, то как их встроить в код?
Ответы (2 шт):
есть бесплатные версии, но они ограничены по функционалу. встроить можно от сюда https://yandex.ru/map-constructor/
Да, бесплатны.
Можно сделать через Конструктор Яндекс Карт, а можно быстрее и проще (при помощи API Яндекс Карт) - убеждаемся, что на странице, куда мы хотим вставить карту нет элемента с id="map". Копируем код ниже и вставляем на страницу своего сайта.
<div id="map" style="width: 100%; height: 400px;"></div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script>
const points = [
["первое поле - постоянно отображаемое название метки",
"второе поле - описание метки, которое появляется при НАВЕДЕНИИ курсора на нее",
"третье поле - описание метки, которое появляется при КЛИКЕ на нее",
"четвертое поле - координаты метки"],
["Геленджик", "Описание филиала в Геленджике",
"Подробное описание филиала в Геленджике", "44.561012, 38.077115"],
["Пятигорск", "Описание филиала в Пятигорске",
"Подробное описание филиала в Пятигорске", "44.039802, 43.070643"],
]
ymaps.ready(init)
function init(){
let myMap = new ymaps.Map("map",
{center: [0,0], zoom: 1,
controls: ["zoomControl", "fullscreenControl"]})
for (let i = 1; i < points.length; i++) {
let coords = points[i][3].split(',')
let placemark = new ymaps.Placemark(coords, {
iconCaption: points[i][0],
hintContent: points[i][1],
balloonContent: points[i][2]
}, {
preset: 'islands#darkOrangeDotIcon'
})
myMap.geoObjects.add(placemark)
}
let centerAndZoom = ymaps.util.bounds.getCenterAndZoom(
myMap.geoObjects.getBounds(), myMap.container.getSize())
myMap.setCenter(centerAndZoom.center, centerAndZoom.zoom, {checkZoomRange: true})
}
</script>
Теперь в блоке "const points = [" в строки вместо "Геленджик" и "Пятигорск" вставляем названия, описания и координаты своих меток. При необходимости строку "Пятигорск" можно убрать или, наоборот, скопировать и после нее добавить необходимое количество меток на карте.
Координаты метки можно получить, выбрав на Яндекс Картах (НЕ в Конструкторе) нужную точку, нажать на нее правой кнопкой мыши и в выпадающем меню выбрать "Что здесь?". После этого в левом столбце под описанием точки будет поле "Координаты".
Готово.
Причем данная карта будет автоматически масштабироваться под ширину экрана, т.е. не надо делать отдельные карты для десктопной и мобильной версии сайта.
Причем если вы вставили карту вышеописанным способом, то ее можно хорошо кастомизировать (добавить функциональность, изменить внешний вид). Об этом можно кратко почитать здесь или длинно и сложно в официальной документации.