Как изменить метки на Яндекс Картах в Битрикс

Хотите заменить стандартные иконки меток на Яндекс Картах в Битрикс? Это возможно! В этой статье мы разберем, как изменить изображения и размеры меток с помощью компонента «Яндекс.Карты: настраиваемая карта».

1. Подготовка компонента

Если вы используете стандартный компонент «Яндекс.Карты: настраиваемая карта», скопируйте его в свой шаблон, чтобы изменения не пропали после обновления системы.

2. Изменение кода для замены иконки метки

В файле script.js найдите функцию BX_YMapAddPlacemark. В ней нужно заменить параметры метки, добавив свой путь к изображению.

Исходный код:

if (!window.BX_YMapAddPlacemark) {
    window.BX_YMapAddPlacemark = function(map, arPlacemark) {
        if (null == map || !arPlacemark.LAT || !arPlacemark.LON) 
            return false;

        var props = {};
        if (null != arPlacemark.TEXT && arPlacemark.TEXT.length > 0) {
            var value_view = arPlacemark.TEXT.indexOf("\n") <= 0 
                ? arPlacemark.TEXT 
                : arPlacemark.TEXT.substring(0, arPlacemark.TEXT.indexOf("\n"));

            props.balloonContent = arPlacemark.TEXT.replace(/\n/g, '<br />');
            props.hintContent = value_view;
        }

        var obPlacemark = new ymaps.Placemark(
            [arPlacemark.LAT, arPlacemark.LON],
            props,
            { balloonCloseButton: true } // ← Здесь меняем параметры
        );

        map.geoObjects.add(obPlacemark);
        return obPlacemark;
    }
}

Измененный код (с кастомной иконкой):

var obPlacemark = new ymaps.Placemark(
    [arPlacemark.LAT, arPlacemark.LON],
    props,
    {
        balloonCloseButton: true,
        iconImageHref: "/images/mark.png", // Путь к изображению
        iconImageSize: [100, 50]           // Размеры иконки (ширина, высота)
    }
);

3. Настройка изображения

• iconImageHref – укажите путь к своей картинке (например, /images/mark.png).

• iconImageSize – задайте размеры в пикселях (ширина, высота).

4. Проверка изменений

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