Как вставить Яндекс Карту на сайт быстро и просто

https://any-key.net/kak-vstavit-yandeks-kartu-na-sajt/

Совершенно неожиданно для меня, моя предыдущая заметка стала самой популярной на подсайте за год. Попробую опубликовать заметку на несколько иную тему — вдруг понравится.

Ну и как обычно — кто любит со скришнотами и с более вменяемым форматированием текста — можно посмотреть здесь.

Для остальных продолжу ниже.

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

Предисловие
Раньше размещал карты на сайт при помощи "Конструктора карт Яндекса" и был счастлив. Когда у сайта появилась мобильная версия, то обратил внимание, что если карта, сделанная в Конструкторе, смотрится хорошо на 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 Яндекс Карт, уже не так страшно читать официальную документацию Яндекса.

P.S. Кому интересно — пожалуйста, поставьте плюс посту, а то в последнее время на Дёти появилась интересная тенденция — сразу же после публикации поста набегают всякие левые мудаки (s083r и сотоварищи), минусуют пост, который им неинтересен (вместо того, чтобы просто пройти мимо), а потом люди, которым данный пост может помочь, просто не увидят его в общей ленте.

Написал Newbie на it.d3.ru / комментировать