Подключение интерактивной Яндекс карты на страницу веб-сайта

Дневник разработчика

Первый шаг

Для подключения карт на сайт нужно иметь аккаунт на Яндекс.

содержимое карты оборачивается в произвольный тег, которому нужно прописать идентификатор, для дальнейшей работы с картой. В моём случае это тег DIV и идентификатор ID=’map’

<div id="map" class="map"></div>

Стилизация тега осуществляется по классу.

Первое что я делаю — задаю размеры для будущей карты.

.map {
  width: 752px; 
  height: 480px;
  background-color:  #f2f2f2;
}

Второй шаг

Следующим этапом идёт добавление скриптов.

добавляем основной js-скрипт подключения яндекс карт. Он состоит из ссылки на api и в неё включён параметр под названием apikey в котором нам нужно указать свой ключ для подключения к картам Яндекса.

<script src="https://api-maps.yandex.ru/2.1/?apikey=7a49471f-d85f-4e70-9dd3-a7a498699c63&lang=ru_RU"></script>

Указывать API-key не обязательно, но лучше перестраховаться. Так будет надёжней.

На этом второй шаг закончен и я начинаю писать JS-код карты для сайта.

Скрипт пишется или подключается ПОД основным скриптом Яндекс карт! Это важно.

Подключение интерактивной Яндекс карты на страницу веб-сайта

Для начала положу карту в подготовленный ранее тег на странице сайта и вызываем функцию — пишем вызов функции ПОСЛЕ самой функции, что бы была здоровая логика повествования в программе — сначала объявляем функцию, а потом вызываем её.

function init() {

  var map = new ymaps.Map("map", {

  });


}

ymaps.ready(init);

Для того что бы наша карта заработала нам нужно всего лишь два параметра:

центр карты (массив данных) и зум (значение масштаба карты, которое нам нужно для отображения на сайте).

Для того что бы определить координаты и добавить их в функцию я использую сервис Яндекс карт. Выбрав объект на карте, который мне нужен для отображения на сайте, я беру его координаты и вставляю в функцию.

Подключение интерактивной Яндекс карты на страницу веб-сайта

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



function init() {

  var map = new ymaps.Map("map", {
    center: [55.648936, 37.562227], 
    zoom: 8
  });


}

ymaps.ready(init);

Наша карта уже видна на сайте. Отлично!

Подключение интерактивной Яндекс карты на страницу веб-сайта

Третий шаг

Продолжаем работу и переходим к следующему шагу — скрытие управляющих элементов на карте, которые не нужны на сайте. Для этого, ПОСЛЕ функции я прописываю:

let center = [55.648935569089, 37.562227];

function init() {

  var map = new ymaps.Map("map", {
    center: center, // ваши данные
    zoom: 8
  });

  let placemarkObruchova = new ymaps.Placemark([55.648936, 37.562227], {}, {
    iconLayout: 'default#image', /* говорим что будем отображать на карте в качестве геометки  */
    iconImageHref: '/local/templates/main/img/balun.svg', /* указываем пусть к картинке на нашем сайте  */
    iconImageSize: [48, 64], /* размеры картинки  */
    iconImageOffset: [-19, -44] /* отступ от центра  */
  });

  let placemarkMkad = new ymaps.Placemark([55.581037, 37.704736], {}, {
    iconLayout: 'default#image',
    iconImageHref: '/local/templates/main/img/balun.svg',
    iconImageSize: [48, 64],
    iconImageOffset: [-19, -44]
  });

  let placemarkKvikadze = new ymaps.Placemark([52.721083, 41.382654], {}, {
    iconLayout: 'default#image',
    iconImageHref: '/local/templates/main/img/balun.svg',
    iconImageSize: [48, 64],
    iconImageOffset: [-19, -44]
  });

  let placemarkSimf = new ymaps.Placemark([55.162597, 37.469683], {}, {
    iconLayout: 'default#image',
    iconImageHref: '/local/templates/main/img/balun.svg',
    iconImageSize: [48, 64],
    iconImageOffset: [-19, -44]
  });

  map.controls.remove('geolocationControl'); // удаляем геолокацию
  map.controls.remove('searchControl'); // удаляем поиск
  map.controls.remove('trafficControl'); // удаляем контроль трафика
  map.controls.remove('typeSelector'); // удаляем тип
  map.controls.remove('fullscreenControl'); // удаляем кнопку перехода в полноэкранный режим
  map.controls.remove('zoomControl'); // удаляем контрол зуммирования
  map.controls.remove('rulerControl'); // удаляем контрол правил
  map.behaviors.disable(['scrollZoom']); // отключаем скролл карты (опционально)

  map.geoObjects.add(placemarkObruchova);
  map.geoObjects.add(placemarkMkad);
  map.geoObjects.add(placemarkKvikadze);
  map.geoObjects.add(placemarkSimf);
}

ymaps.ready(init);
Подключение интерактивной Яндекс карты на страницу веб-сайта

Готово!

Осталось два элемента на карте с копирайтом и ссылкой на Яндекс. Их лучше скрывать по средствам CSS-стилей. Пишу:

[class*=»copyrights-pane»] {

  display: none !important;

}

и как результат — видим чистую карту, как в моём дизайн-макете.

Подключение интерактивной Яндекс карты на страницу веб-сайта

Четвёртый шаг

Следующий шаг — добавление геометки на карту. Для этого мы допишем в нашу программу (скрипт) следующие данные:

let center = [55.648935569089, 37.562227];

function init() {

  var map = new ymaps.Map("map", {
    center: center, // ваши данные
    zoom: 8
  });

  let placemarkObruchova = new ymaps.Placemark([55.648936, 37.562227], {}, {
    iconLayout: 'default#image', /* говорим что будем отображать на карте в качестве геометки  */
    iconImageHref: '/local/templates/main/img/balun.svg', /* указываем пусть к картинке на нашем сайте  */
    iconImageSize: [48, 64], /* размеры картинки  */
    iconImageOffset: [-19, -44] /* отступ от центра  */
  });

  let placemarkMkad = new ymaps.Placemark([55.581037, 37.704736], {}, {
    iconLayout: 'default#image',
    iconImageHref: '/local/templates/main/img/balun.svg',
    iconImageSize: [48, 64],
    iconImageOffset: [-19, -44]
  });

  let placemarkKvikadze = new ymaps.Placemark([52.721083, 41.382654], {}, {
    iconLayout: 'default#image',
    iconImageHref: '/local/templates/main/img/balun.svg',
    iconImageSize: [48, 64],
    iconImageOffset: [-19, -44]
  });

  let placemarkSimf = new ymaps.Placemark([55.162597, 37.469683], {}, {
    iconLayout: 'default#image',
    iconImageHref: '/local/templates/main/img/balun.svg',
    iconImageSize: [48, 64],
    iconImageOffset: [-19, -44]
  });

  map.controls.remove('geolocationControl'); // удаляем геолокацию
  map.controls.remove('searchControl'); // удаляем поиск
  map.controls.remove('trafficControl'); // удаляем контроль трафика
  map.controls.remove('typeSelector'); // удаляем тип
  map.controls.remove('fullscreenControl'); // удаляем кнопку перехода в полноэкранный режим
  map.controls.remove('zoomControl'); // удаляем контрол зуммирования
  map.controls.remove('rulerControl'); // удаляем контрол правил
  map.behaviors.disable(['scrollZoom']); // отключаем скролл карты (опционально)

  map.geoObjects.add(placemarkObruchova);
  map.geoObjects.add(placemarkMkad);
  map.geoObjects.add(placemarkKvikadze);
  map.geoObjects.add(placemarkSimf);
}

ymaps.ready(init);

Готово!

Юрий Ронин