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

2026-08-12 07:05 Карты

Инструкция

Если на карту нужно добавить десятки или сотни адресов, создавать каждую точку вручную неудобно. Эта модификация позволяет перечислить все точки в коде и одновременно установить для них собственную SVG-иконку.

Код проверен с блоком CN403. Он может работать и с другими стандартными блоками карт Tilda, если они создают массив маркеров с названием, начинающимся с arMapMarkers. Для Zero Block и сторонних карт этот способ не подходит.

Добавьте на страницу стандартный блок карты, например CN403.
Добавьте в карту хотя бы одну точку через настройки блока. Она нужна, чтобы Tilda создала массив маркеров.
Опубликуйте страницу, откройте её в браузере и запустите консоль разработчика.
Введите в консоли команду Object.keys(window).filter(k => k.startsWith("arMapMarkers")). В результате появится название переменной, например arMapMarkers1631394401.
В коде замените значение arMapMarkers1631394401 в переменной MAP_MARKERS_KEY на название, которое показала консоль. Если на странице несколько карт, будет найдено несколько переменных. Номер нужной карты совпадает с номером её блока в HTML: например, переменной arMapMarkers1631394401 соответствует блок rec1631394401.
Загрузите свою SVG-иконку в Tilda и замените ссылку в переменной MARKER_ICON_URL.
Добавьте нужные точки в массив EXTRA_MARKERS. Для каждой точки последовательно указываются название, широта, долгота и описание.
Добавьте на страницу блок T123, вставьте в него код модификации и разместите этот блок перед картой.
Опубликуйте страницу и проверьте отображение всех точек и всплывающих описаний.

Важно:

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

Каждая точка должна находиться внутри массива EXTRA_MARKERS и отделяться от следующей запятой. После последней точки запятая необязательна.

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

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

Используйте прямую ссылку на файл SVG, а не ссылку на страницу, где он размещён. После изменений обязательно публикуйте страницу: в редакторе Tilda пользовательский код может не выполняться.

<!-- Скрипт, который добавляет много точек и устанавливает собственную SVG-иконку для маркеров стандартной карты Tilda. Источник: bulgkate.ru -->
<script>
(function () {
    const MAP_MARKERS_KEY = 'arMapMarkers1631394401'; // Укажите переменную своей карты
    const MARKER_ICON_URL = 'https://static.tildacdn.com/tild3734-3939-4639-a566-323332393231/Frame_87.svg'; // Укажите ссылку на свою SVG-иконку

    const EXTRA_MARKERS = [
        ['Тестовый адрес 1', 55.7558, 37.6176, 'Описание первой точки'],
        ['Тестовый адрес 2', 59.9343, 30.3351, 'Описание второй точки'],
        ['Тестовый адрес 3', 56.8389, 60.6057, 'Описание третьей точки']
    ];

    const MAX_ATTEMPTS = 100;
    let attempts = 0;

    function start() {
        const markers = window[MAP_MARKERS_KEY];

        if (!Array.isArray(markers)) {
            attempts += 1;

            if (attempts < MAX_ATTEMPTS) {
                setTimeout(start, 100);
            } else {
                console.warn('Tilda: массив маркеров карты не найден:', MAP_MARKERS_KEY);
            }

            return;
        }

        if (markers.__customMarkersAdded) {
            return;
        }

        markers.__customMarkersAdded = true;

        markers.forEach(function (marker) {
            marker.url = MARKER_ICON_URL;
        });

        EXTRA_MARKERS.forEach(function ([title, lat, lng, descr]) {
            markers.push({
                title: title,
                descr: descr,
                lat: String(lat),
                lng: String(lng),
                color: null,
                url: MARKER_ICON_URL,
                isOpen: false,
                isHidden: false,
                offset: null
            });
        });
    }

    start();
})();
</script>