Как сделать интерактивную карту на Tilda

Видеоинструкция (для тех, кому неудобно работать с текстом)

Интерактивная кастомизированная карта на сайте — это важный инструмент для отображения географической информации, который позволяет пользователям взаимодействовать с картой и получать дополнительную информацию о конкретных объектах или регионах. В отличие от статичных изображений, интерактивные карты делают сайт более удобным и привлекательным для посетителей.
Кастомизация интерактивной карты — это создание уникального дизайна и функционала, соответствующего бренду и целям сайта. Это хорошее решение, потому что:

Улучшает пользовательский опыт, делая навигацию по карте интуитивно понятной и удобной.
Позволяет выделить важные объекты или регионы, добавляя к ним описания, ссылки или изображения.
Повышает вовлеченность посетителей, стимулируя их взаимодействие с сайтом.
Обеспечивает более точное отображение информации, релевантной вашему бизнесу или проекту.
Создает уникальный визуальный стиль, который выделяет ваш сайт среди конкурентов.

В итоге, кастомизированная интерактивная карта помогает лучше донести информацию, повысить доверие и увеличить конверсию.

Подойдет для блоков: "География клиентов", "Карта клиентов", "География партнёров", "Карта партнёров", "Карта магазинов" и т.д.

Находим в интернете любую необходимую карту, предположим, я выбрал для интеграцию следующую картинку:

"Заходим в наш проект, создаем пустой Zero Блок (1.1-1.3), удаляем все содержимое (1.4), добавляем изображение, нажав "Добавить изображение" ("add image") (1.5), и вставляем нашу карту (1.6-1.7).

Tilda поддерживает практически любые форматы изображений, но настоятельно рекомендую оптимизировать изображение или конвертировать его в формат WebP для обеспечения быстрой загрузки сайта. Для этого вы можете воспользоваться любым онлайн-сервисом-конвертером."

Настройка метки для открытия окна с партнерами, клиентами, офисами, магазинами и т. д.

Находим в интернете иконку "метки" и, как указано в пунктах 1.5-1.7, вставляем её в виде изображения в наш Zero блок (пункт 2.0). Меняем местоположение и размер данной метки, так чтобы она указывала на нужную нам локацию (пункт 2.1). Теперь добавим эффект — классическую анимацию увеличения метки при наведении. Для этого:

Кликните по изображению, чтобы открыть его настройки ("Settings").
В самом низу настроек элемента найдите "Step-by-step Animation" * и нажмите на кнопку "Add" (пункт 2.2).
В открывшихся настройках "Step-by-step Animation"* в строке "Event" выберите "On Hover" (пункт 2.3).
Перед вами появится шаги (steps). "Start" — начальная точка элемента. Добавьте второй шаг, нажав "Add Step" (пункт 2.4), и редактируйте его по первым трем параметрам на ваш вкус:

"Duration" — временная продолжительность перехода от шага 0 к шагу 1.
"Move x,y" — изменение по осям x, y.
"Scale x,y" — изменение размера элемента.

Настройте данные параметры так, как указано в пункте 2.5.

*Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие и креативные идеи в соответствии с вашим сценарием.

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

Создаем новый элемент, и на этот раз выбираем Shape (3.1), задаем необходимый цвет (в моем случае - белый) (3.2).
Я хочу немного округлить углы, об интерфейсе не забываем, поэтому немного увеличиваю значение параметра "radius" в "border" (3.3).
Данный Shape служит нам окном, которое необходимо заполнить данными. Добавляем изображение и текст (3.4), редактируем размеры, местоположение, шрифт, жирность и т.д. (3.5). Как это получилось, вы можете увидеть на фото 3.6. Для удобства перемещения окна группируем элементы в рамках одного окна. Для этого выделяем все необходимые нам элементы: shape, text, image с меткой; кликаем правой кнопкой мыши и нажимаем "group" (3.7). Если против вашего желания выделился лишний элемент (например, карту и метку выделять не нужно), нажмите на значок замка в списке всех элементов (3.8).
Первое окно с информацией готово.

Следующим пунктом мы будем вместе с вами устанавливать анимацию окна, чтобы по умолчанию оно было не видно, а при наведении курсора мыши на метку на карте данное окно открывалось.

Выделим созданную нами группу на шагах 3.1-3.7. В настройках находим уже знакомый нам заголовок "Step-by-step Animation" (2.2), ниже которого расположена кнопка "Add". На нее необходимо нажать. В открывшихся настройках "Step-by-step Animation" в строке "Event" выбираем "On Hover" (4.1).
Добавляем второй шаг "Add Step" и редактируем его следующим образом (4.2):

меняем параметр "Duration" на 0,
меняем "Opacity" на 0.

Добавляем третий шаг "Add Step" и редактируем его следующим образом (4.3):

меняем параметр "Duration" на подходящее для вас значение (я установил 0.3),
меняем "Opacity" на 100.

Над нашими шагами анимации расположена кнопка "Add Trigger", на которую нам необходимо нажать, после чего сразу нажать на метку на карте. Таким образом, при наведении курсора на метку мыши будет открываться окно с информацией (4.4).
Вы можете протестировать анимацию в режиме предпросмотра страницы.

Создаем второе окно с необходимыми данными. В качестве "заглушки" данных поставлю наш логотип в другой версии, чтобы вы могли без труда отличать окна. Повторю, что вы можете интегрировать любые другие элементы.

Выделяем созданную нами группу на шагах 3.1-3.7, копируем ее и вставляем (Ctrl+C; Ctrl+V) (5.1-5.2). Во избежание дальнейших путаниц настоятельно рекомендую новую группу переименовать (5.3). Аналогично копируем и вставляем изображение метки и располагаем его в необходимом месте (5.4).
После того как мы добавили во нулевой блок второе окошко с информацией, заходим в настройки Step-by-step animation и меняем триггер на другую метку (5.5).
В результате вышеописанных манипуляций первое окно открывается при наведении на первую метку, аналогично для второй метки и окна. Можете попробовать протестировать в режиме предпросмотра. Осталось поменять контент внутри окошка: текст, изображение и т.д. (5.6)

Основной функционал мы с Вами реализовали, Вы можете менять количества меток, окон, путём копирования, а также редактировать тексты и логотипы.

Мобильная адаптация

Теперь приступим к мобильной адаптации нашей карты. Как вы понимаете, чудо-фокус с наведением мыши на мобильных устройствах не сработает, поэтому мы просто сделаем открывающиеся pop-up окна для каждой метки.
Инструкция:

Копируем данный Zero блок (6.1). Для первого блока определяем область видимости от 1200px (для компьютеров), а для второго (копии) — до 1200px (6.2).
Заходим в редактор второго блока, удаляем все окна с нашими элементами, оставляем только карту и метки (6.3), а также адаптируем его под необходимые виды устройств, кроме тех, что выше 1200px (6.4).
Выходим из данного zero-блока и создаём новый пустой zero-блок (6.5), в который помещаем всю информацию, которая была в любом одном окне, включая фоновый элемент shape.
После этого создадим ещё один блок - Zero popup - T1093. Заходим в раздел "Контент" данного блока (рядом с кнопкой "Настройки"). В открывшихся настройках мы видим два поля: "ID нулевого блока" — вставляем ID Zero блока с картой, и "Ссылка на pop-up" — устанавливаем, к примеру, "#zeropopup1" (6.6).

P.S. ID блока можно посмотреть внизу настроек данного блока (6.7).

Заходим в настройки zero-блока с картой и метками для адаптированной версии, нажимаем на необходимую метку, и в настройках (settings) в поле "Link" указываем "#zeropopup1" (6.8).

Готово, можете протестировать. Теперь при нажатии на мету открывается "zeropopup1". После того, как на мобильных телефонах/планшетах у нас открывается окошко при нажатии на метку - создаем необходимое нам количество zero-блоков с окнами и zero popup. Главное, не забывать вставлять корректное значение в "ID нулевого блока", а также менять ссылку на popup, они должны отличаться друг от друга: "zeropopup2", "zeropopup3", "zeropopup4" и т.д.

Автор статьи - Григорий Старцев, руководитель GSP Developement