Отображение Яндекс карт в Битрикс

Довольно часто на сайтах клиентов требуется реализовать отображение Яндекс карт:

yamap1

При этом необходимо, чтобы контент-менеджер не заморачивался с настройкой отображения. В Битриксе реализация оказалась довольно простой.

Итак, приступим:

Первое, что мы должны сделать, это создать свойство у инфоблока, который содержит информацию о адресах:

yamap2

Тип свойства — «Привязка к Яндекс. Карте». Как это выглядит со стороны контент-менеджера? А вот так:

yamap3

Контент-менеджер вводит соответствующий адрес в поле «Поиск по карте» и получает координаты точки. Ага! Координаты у нас есть, а это значит, что можно воспользоваться API-шкой Яндекс. Карт. Заходим в их Песочницу и изучаем пример: https://tech.yandex.ru/maps/jsbox/2.1/placemark

Давайте реализуем отображение на основе него:

Поясню код:

Каждая карта будет отображаться в div-нике с уникальным id-ником по шаблону map_<?=$contact_ob[‘ID’]?>

Перебирая в foreach-е элементы инфоблока с адресами мы пытаемся получить координаты из свойства PROPERTY_YMAP_VALUE. Если получилось их получить, то создаём функцию инициализации отображения Яндекс. Карты с названием по шаблону init_<?=$contact_ob[‘ID’]?>. Далее просто описываем необходимые данные: координаты центра карты, масштаб и т.д. и добавляем нашу «марку» на карту. В качестве подсказки использовано название элемента инфоблока адресов: <?=$contact_ob[‘NAME’]?>.

После этого подпихиваем эту функцию в ready и вуа-ля! Готово!

3 комментария

  1. Здорово, Алексей.
    Хороший блог, добавить форму обратной связи.
    По сабжу одно замечание, js следует вставлять через встроенные функции, чтобы bitrix знал о нем и мог его объединить, минифицировать и на CDN отправлять:
    AddHeadScript(‘https://api-maps.yandex.ru/2.1/?lang=ru_RU’); ?>
    AddHeadString(» . $js . », true); ?>

    1. Благодарю за ценный комментарий 🙂
      p.s. «добавить форму обратной связи.» — в отпуске этим займусь.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *