Содержание:

1. Предисловие (можно смело пропустить)
2. Как вставить Яндекс Карту на сайт быстро и просто
3. Настройка карты (необязательно)

Предисловие

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

Но тут понадобилось создать на карте не стандартную метку из набора, предлагаемого Яндексом, а метку с собственным изображением. С неприятным удивлением обнаружил, что при помощи Конструктора это не сделать и необходимо использовать API Карт. Зашел на официальную страницу с документацией API Карт и начал читать. После 5 минут чтения официальной документации грязно выругался - такое впечатление, что ее писали Чужие для Хищников. Погуглив и прочитав несколько статей из поисковой выдачи все же решил разбираться с тем, что написано в официальной документации. Оказалось, что при помощи API Карт можно сделать много интересных вещей, но у меня такой задачи изначально не было. Поэтому ниже постараюсь рассказать, как можно сделать Яндекс Карту на сайте максимально быстро и просто (гораздо быстрее, нежели с Конструктором) при помощи 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 = [" в строки вместо "Геленджик" и "Пятигорск" вставляем названия, описания и координаты своих меток.
При необходимости строку "Пятигорск" можно убрать или, наоборот, скопировать и после нее добавить необходимое количество меток на карте.

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

Готово!

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

Настройка карты

Но если вам надо не только "быстро и просто", а хочется еще и красиво, и функционально, то продолжим.

Если у вашего сайта нет мобильной версии, то можете пропустить данный абзац, а можете в строке

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

изменить высоту блока с картой. Для этого измените значение height на наиболее подходящее вам.
Если у вашего сайта есть мобильная версия, то лучше удалить атрибут style и прописать стили в соответствующем файле.

Изменение значка метки

Список стандартных значков приведен на данной странице.
Выбираем понравившийся значок метки, копируем его ключ и в строке "preset: 'islands#darkOrangeDotIcon'" вместо "islands#darkOrangeDotIcon" вставляем ваш ключ.
Если вы выбрали значок с надписью, то тогда еще необходимо заменить строку "iconCaption: points[i][0]," на "iconContent: points[i][0],"

Различные значки меток для филиалов

Строку "preset: 'islands#darkOrangeDotIcon'" меняем на "preset: points[i][4]".
В блоке "const points = [" в строке каждого филиала после поля с координатами добавляем поле с ключом значка метки. Должно получиться примерно так:

["Геленджик", "Описание филиала в Геленджике", "Подробное описание филиала в Геленджике", "44.561012, 38.077115", "islands#blueDotIcon"],

["Пятигорск", "Описание филиала в Пятигорске", "Подробное описание филиала в Пятигорске", "44.039802, 43.070643", "islands#darkGreenCircleDotIcon"],

Метка с собственным изображением

Вместо строки "preset: 'islands#darkOrangeDotIcon'" вставляем блок:

iconLayout: 'default#image',
// Своё изображение иконки метки
iconImageHref: 'images/myIcon.gif',
// Размеры метки
iconImageSize: [30, 42],
// Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки)
iconImageOffset: [-5, -38]

Запрет изменения масштаба карты колесиком мыши

После строки

myMap.setCenter(centerAndZoom.center, centerAndZoom.zoom, {checkZoomRange: true})

добавляем строку

myMap.behaviors.disable('scrollZoom')

Отключение названия или описания метки

Для отключения постоянно отображаемого названия метки перед строкой "iconCaption: points[i][0]," необходимо поставить "//". Должно получиться

//iconCaption: points[i][0],

Для отключения описания метки, которое появляется при наведении курсора на нее, перед строкой "hintContent: points[i][1]," необходимо поставить "//".

Для отключения описания метки, которое появляется при клике на нее, перед строкой "balloonContent: points[i][2]" необходимо поставить "//".

Удаление или добавление отдельных элементов управления карты

Существует 9 стандартных элементов управления карты:

Изменение масштаба	zoomControl
Определить мое местоположение	geolocationControl
Маршруты	routeButtonControl
Найти адрес или объект	searchControl
Проложить маршрут	routeEditor
Пробки	trafficControl
Слои	typeSelector
Во весь экран	fullscreenControl
Измерение расстояний	rulerControl

Для добавления необходимых вам элементов, вставляем их в строку

let myMap = new ymaps.Map("map", {center: [0,0], zoom: 1, controls: ["zoomControl", "fullscreenControl"]})

в блок "controls". В вышеприведенном примере установлено два элемента управления - "изменение масштаба" и "во весь экран".

Также есть возможность добавлять на карту выпадающие списки, собственные кнопки и элементы управления, но об этом читайте в официальной документации.

Как добавить очень много меток на карту или загрузить метки на карту из JSON - написано здесь.

Если вам не хватило вышеописанных возможностей - добро пожаловать в официальную документацию Яндекса.

На мой взгляд, после вышеописанного введения в API Яндекс Карт, уже не так страшно читать официальную документацию Яндекса.