Учимся работать с Яндекс картами

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

Подключаем Яндекс карту на страницу сайта

раньше, когда я делал сайты с интерактивными картами, я лез на сайт Яндекса в конструктор карт и создавал варианты карт в нем.

Полученный «шедевр» гордо вставлял на лендинги и сайты со страничками «Контакты» и радовался.

Учимся работать с Яндекс картами

Для вставки карт Яндекса я использовал фрагмент JavaScript кода, который генерировал конструктор.

Учимся работать с Яндекс картами

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

Что из этого получилось и как такое повторить читайте в этой статье.

Теоретическая часть перед началом работ с Яндекс картами

Работать будем с API Яндекс карт. Поэтому нам нужно понимать что это такое — API.

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

Грубо говоря, если вы хотите налить на хот-дог кетчупа, то вы взаимодействуете с бутылочкой. в ней кетчуп, который вы выдавливаете на сосиску. Для взаимодействия с бутылкой и выдавливания кетчупа вам придётся взять её в руки, перевернуть и надавить на неё — это все методы взаимодействия.

А сама бутылка — это объект, внутри неё кетчуп — эт тоже объект.

Если вернуться от еды к нашей карте, то API как раз и есть эта бутылка, с которой нужно взаимодействовать определённым образом. Этому мы и будем сегодня учиться. Тока без кетчупа обойдемся )))

Будем показывать карту, рисовать на ней геометки и добавлять к ним подписи.

А еще мне очень нравится аналогия API с готовым проектом, как бы набор заготовок, которые могут быть нам полезны.

Нам с вами очень повезло, потому что документация по API Яндекс карт очень обширна и вся вся написана на русском языке.

Учимся работать с Яндекс картами

Перед началом работ нам потребуется подготовить следующие штуки:

Работать будем на странице сайта, соответственно вам нужно определиться куда именно будет вставляться карта — в какой части страницы. У меня она будет вставляться в секцию про инфраструктуру Жилого комплекса Южная Звезда (проект одного из моих клиентов).

Учимся работать с Яндекс картами
карту будем вставлять в контейнер с классом map? как и рекомендовано в документации Яндекса.
Учимся работать с Яндекс картами
Вот так выглядит карта вставленная через фрагмент JS-кода, сгенерированная через конструктор Яндекс-карт.

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

Учимся работать с Яндекс картами
Учимся работать с Яндекс картами
картинки для геометок в формате SVG

Иконки готовы? Отлично! Теперь давайте подключим Яндекс карту на сайт. Для этого идём на страницу документации Яндекс Карт в раздел быстрый старт и копируем фрагмент кода со скриптом.

Учимся работать с Яндекс картами
скрипт необходимо установить на ваш сайт, для подключения Яндекс карт.

Для корректной работы скрипта вам потребуется API-ключ, который можно получить в кабинете разработчика по ссылке.

Его нужно вставить в соответствующее место скрипта.

После того как вы закончили подготовку к настройке Яндекс карты на сайте, можно приступать к её настройке.

Настройка Яндекс карты на сайте начинается с её инициализации. Для этого нам понадобится написать код в js-файле, который мы заранее подготовили и подключили на сайт. Я назвал его map.js

  1. Инициализация карты выполняется по средствам команды на javascript
<script type="text/javascript">
    // Функция ymaps.ready() будет вызвана, когда
    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
    ymaps.ready(init);
    function init(){
        // Создание карты.
        var myMap = new ymaps.Map("map", {
            // Координаты центра карты.
            // Порядок по умолчанию: «широта, долгота».
            // Чтобы не определять координаты центра карты вручную,
            // воспользуйтесь инструментом Определение координат.
            center: [55.76, 37.64],
            // Уровень масштабирования. Допустимые значения:
            // от 0 (весь мир) до 19.
            zoom: 7
        });
    }
</script>

Это значит что как только загрузится API и будет построен DOM страницы сайта, начнёт выполняться код функции init — это и есть инициализация.

Учимся работать с Яндекс картами

2. Затем пишем саму функцию init и внутри пишем конструктор карты и осуществляю привязку к нашему id=»map».

Так же нужно обязательно указать два параметра: центр карты и коэфициент масштабирования.

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

Учимся работать с Яндекс картами

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

Учимся работать с Яндекс картами
Вот какой код получился у меня

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

Учимся работать с Яндекс картами

Для отключения контролов я просто указываю лишь бегунок масштабирования карты, тем самым переопределяя значения по умолчанию. А если бы я захотел убрать и его, то просто оставил бы массив пустым.

Учимся работать с Яндекс картами
Вот такой код у меня получился. Я прописал параметр отображения контрола «Ползунок» для масштабирования карты, а остальное показываться не будет.

Теперь давайте отключим зум карты (он активен по умолчанию) при помощи колёсика мыши, а то бывает и такое что люди вязнут в этом блоке и не могут пролистать сайт вверх или вниз, потому что прокрутка страниц по привычке осуществляется тем самым колесиком.

Итак, для отключения скрола пропишем следующий параметр: behaviors: [‘drag’] После этого масштабирование карты будет осуществляться только при взаимодействии с боковым контролом, а перемещение по карте — с зажатой левой клавишей мыши. Это привычно для большинства пользователей.

Учимся работать с Яндекс картами
Отключаем скрол карты при вращении колёсика мыши.

Добавляем геометки на карту

Наконец то пришло время создать нашу первую геометку на карте. Для этого внутри нашей функции init объявляем новую переменную и прописываем ей параметры. Это и будет наша первая геометка. После чего размещаем метку на карте.

ymaps.ready(init);
function init(){
    // Создание карты.
    var myMap = new ymaps.Map("map", {
        center: [44.9973,38.9397],
        zoom: 16,
        controls: ["zoomControl"],
        behaviors: ['drag']
    });
    // создание метки
    var myPlacemark = new ymaps.Placemark([44.9973,38.9397], {

    });

    // показываем метку на карте 
    myMap.geoObjects.add(myPlacemark); 
}

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

Заменяем стандартные иконки своими собственными ярлыками

Кластеризация геообъектов на карте

Юрий Ронин