Доступность Яндекс Карт. Встраивание Яндекс Карт

Бесплатны ли Яндекс Карты и если да, то как их встроить в код?


Ответы (2 шт):

Автор решения: EkaterinaRatatui

есть бесплатные версии, но они ограничены по функционалу. встроить можно от сюда https://yandex.ru/map-constructor/

→ Ссылка
Автор решения: AnyKey

Да, бесплатны.

Можно сделать через Конструктор Яндекс Карт, а можно быстрее и проще (при помощи 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 = [" в строки вместо "Геленджик" и "Пятигорск" вставляем названия, описания и координаты своих меток. При необходимости строку "Пятигорск" можно убрать или, наоборот, скопировать и после нее добавить необходимое количество меток на карте.

Координаты метки можно получить, выбрав на Яндекс Картах (НЕ в Конструкторе) нужную точку, нажать на нее правой кнопкой мыши и в выпадающем меню выбрать "Что здесь?". После этого в левом столбце под описанием точки будет поле "Координаты".

Готово.

Причем данная карта будет автоматически масштабироваться под ширину экрана, т.е. не надо делать отдельные карты для десктопной и мобильной версии сайта.

Причем если вы вставили карту вышеописанным способом, то ее можно хорошо кастомизировать (добавить функциональность, изменить внешний вид). Об этом можно кратко почитать здесь или длинно и сложно в официальной документации.

→ Ссылка