Как добавить карту с динамическими точками в Битрикс 1С

Как добавить карту с динамическими точками в Битрикс 1С

Интерактивная карта на сайте — это удобный способ показать расположение объектов: магазинов, офисов, складов или точек обслуживания. В Битрикс 1С это можно сделать через инфоблоки и Яндекс.Карты.

1. Создание инфоблока для точек

Сначала создаём инфоблок, например, Места, с полями:

• Название (NAME)
• Координаты (PROPERTY_COORDS) — строка вида 55.751574,37.573856
• Описание (PROPERTY_DESCRIPTION)
• Категория (PROPERTY_CATEGORY) — необязательное поле для фильтров

2. Получение данных из инфоблока (PHP)

Используем API Битрикс для получения всех активных элементов инфоблока и подготовки массива точек для JavaScript.

<?php
use Bitrix\Main\Loader;

Loader::includeModule('iblock');

$arPoints = [];
$rsElements = CIBlockElement::GetList(
    ["SORT" => "ASC"],
    ["IBLOCK_ID" => 5, "ACTIVE" => "Y"], // Замените 5 на ID вашего инфоблока
    false,
    false,
    ["ID", "NAME", "PROPERTY_COORDS", "PROPERTY_DESCRIPTION", "PROPERTY_CATEGORY"]
);

while($arElement = $rsElements->GetNext()) {
    $coords = explode(',', $arElement['PROPERTY_COORDS_VALUE']);
    if(count($coords) == 2) {
        $arPoints[] = [
            'name' => $arElement['NAME'],
            'lat' => trim($coords[0]),
            'lng' => trim($coords[1]),
            'description' => $arElement['PROPERTY_DESCRIPTION_VALUE'],
            'category' => $arElement['PROPERTY_CATEGORY_VALUE']
        ];
    }
}
?>

3. Вывод карты и динамических точек (JavaScript)

4. Расширенные возможности

4.1 Фильтр по категориям

Если у точек есть категории, можно добавить селект для фильтрации:

<select id="categoryFilter">
    <option value="">Все категории</option>
    <option value="Магазин">Магазины</option>
    <option value="Офис">Офисы</option>
</select>

<script>
document.getElementById('categoryFilter').addEventListener('change', function() {
    var selected = this.value;
    map.geoObjects.removeAll();
    points.forEach(function(point) {
        if(!selected || point.category === selected) {
            var placemark = new ymaps.Placemark([point.lat, point.lng], {
                balloonContentHeader: point.name,
                balloonContentBody: point.description
            }, { preset: 'islands#blueDotIcon' });
            map.geoObjects.add(placemark);
        }
    });
});
</script>

4.2 Кастомные иконки для точек

Можно использовать свои иконки для каждой категории:

var iconUrls = {
    'Магазин': '/local/templates/site/images/store.png',
    'Офис': '/local/templates/site/images/office.png'
};

points.forEach(function(point) {
    var placemark = new ymaps.Placemark([point.lat, point.lng], {
        balloonContentHeader: point.name,
        balloonContentBody: point.description
    }, {
        iconLayout: 'default#image',
        iconImageHref: iconUrls[point.category] || '/local/templates/site/images/default.png',
        iconImageSize: [30, 42],
        iconImageOffset: [-15, -42]
    });
    map.geoObjects.add(placemark);
});

5. Интеграция в шаблон Bitrix

Разместите код PHP и HTML в вашем шаблоне или компоненте. PHP получает данные из инфоблока, а JS отображает карту. Любое добавление/изменение элементов инфоблока автоматически обновит карту без изменения кода.

6. Итог

Мы рассмотрели, как создать карту с динамическими точками в Битрикс 1С:

• Создали инфоблок с точками и их координатами
• Получили данные через PHP
• Отобразили точки на карте с помощью JavaScript (Яндекс.Карты)
• Добавили фильтры и кастомные иконки для расширенных возможностей

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