База знаний

📑 T143: Карта Google или Yandex

Разбираем настройку интеграции для блока "T143: Карта Google или Yandex" на примере карты станций метро с фильтрами и поиском.


Интеграция "T143: Карта Google или Yandex" позволяет отобразить на карте кликабельные точки с попапом на основе данных из Airtable. Фильтры и поиск можно реализовать при помощи дополнительной интеграции "BF203N: Форма с фильтрами и поиском".

Структура данных в Airtable


Данные о станциях хранятся в Airtable в таблице "Станции" базы "Метро".


Для отображения на карте в данном примере используются поля "Название", "Широта", "Долгота" и "Описание".

В поле "Описание", помимо обычного текста, можно использовать Markdown и HTML разметку. В данном кейсе значения для описания станций в попапе формируются по формуле. Если формулы или разметка покажутся сложными, можно заменить тип поля "Описание" на Long text и задавать описания станций явно.

Ниже приведён пример значения поля "Описание" для одной из станций:


Общая формула для поля "Описание" выглядит следующим образом:

"<h2 style='color: #" & {Цвет} & "'>" & {Название} & "</h2><br>\n" &
"<big>Первый поезд: " & {Первый поезд} & "</big><br>\n" &
"<big>Последний поезд: " & {Последний поезд} & "</big><br><br>\n" &
IF({Фото}, "![](" & {Фото ссылка} & ")<br>\n", "") &
"<big><a href='https://yandex.ru/search/?text=метро " & {Название} & " " & {Линия} & "' target='_blank'>Подробнее о станции</a></big>"

Значения поля "Фото ссылка" для загруженных в поле "Фото" изображений также вычисляются по формуле:

RIGHT(LEFT({Фото}, LEN({Фото}) - 1), LEN({Фото}) - SEARCH("https://", {Фото}))

Блок с картой на Тильде


Добавим в редакторе Тильды блок "T143: Карта Google или Yandex".


В разделе "Контент" блока с картой в поле ИСТОЧНИК КАРТ выбираем Yandex Maps. Прописываем КЛЮЧ ДЛЯ MAPS API по инструкции Тильды для Яндекс Карт.


Чтобы использовать Google Maps, в поле ИСТОЧНИК КАРТ надо выбрать Google Maps и прописать КЛЮЧ ДЛЯ MAPS API по инструкции для Google Maps.

Интеграция Collabza для карты


Подключаем jQuery в разделе Настройки сайта > Еще:

Нажимаем СОЗДАТЬ ИНТЕГРАЦИЮ в ЛК Collabza и заполняем форму:



Значение AirTable API key копируем со страницы https://airtable.com/account .

Значение AirTable base ID находим на странице https://airtable.com/api , выбрав нашу базу "Метро". Обратите внимание, что точка в конце к base ID не относится.

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


Указываем название, чтобы ориентироваться в настроенных интеграциях.

ID блока на Tilda копируем из нижней части раздела "Настройки" нашего блока.

В качестве типа блока выбираем "T143: Карта Yandex". Указываем, из каких полей Airtable подтягивать на Тильду значения в поля ЗАГОЛОВОК ТОЧКИ, ОПИСАНИЕ ТОЧКИ, GEO MAP Y (ШИРОТА) и GEO MAP X (ДОЛГОТА).

Нажимаем "Создать", - и через несколько секунд интеграция готова.



Для завершения настройки добавляем под нашим блоком T143 блок "T123: HTML-код", копируем туда полученную строчку и публикуем страницу.


Интеграция подтянет из Airtable на карту все станции. При клике на станцию в попапе отображается значение из поля "Описание". Если в описание вставить ссылку, то будет возможность перейти к более подробному описанию на отдельной странице.


В примере ссылка ведёт на Яндекс с соответствующим поисковым запросом, но при необходимости можно на Тильде создать динамическую страницу станции.

Блок с фильтрами и поиском


Добавим в редакторе Тильды блок "BF203N: Форма с несколькими полями для ввода", - за счёт интеграции "BF203N: Форма с фильтрами и поиском" его можно будет использовать для фильтрации и поиска станций, подтягиваемых на карту в блок T143.


В разделе "Контент" создаём поле типа "Выпадающий список" для фильтрации станций по линии метро, указанной в Airtable в поле "Линия". Для такого типа поля интеграция будет проверять полное совпадение выбранного значения (без учёта регистра букв).


Создаём поле типа "Поле для ввода в одну строку" для поиска станций по названию. Для такого типа поля интеграция будет проверять вхождение введённого значения в качестве подстроки (без учёта регистра букв).


Интеграция для фильтров и поиска

Создаём интеграцию Collabza аналогично тому, как мы делали это для блока с картой, но на втором шаге выбираем тип "BF203N: Форма с фильтрами и поиском".


В поле "ID блока на Tilda" указаваем ID блока с формой BF203N, а в поле "ID фильтруемого блока" указываем ID блока с картой T143.

Нажимаем "Создать", - и через несколько секунд интеграция готова. Для завершения настройки добавляем под нашим блоком с формой BF203N блок "T123: HTML-код", копируем туда полученную строчку и публикуем страницу.


В итоге станции из Airtable отображаются на карте с возможностью фильтрации по линии метро и поиском по подстроке в названии.

При возникновении вопросов - добавляйтесь в чат сообщества https://t.me/collabza_chat, - там всегда рады помочь!

Шаблоны

1) Airtable: https://airtable.com/appDtzco3gYuMk3K3/shr39MzGZlvPRO3jo
2) Tilda id шаблона: 49035787
3) Collabza интеграция 1 (карты t143): https://collabza.ru/tools-creator?template_id=7d98959b-daf0-4bf3-81d2-eed07d6212be
4) Collabza интеграция 2 (фильтры bf203n): https://collabza.ru/tools-creator?template_id=998c930f-4c39-4557-9eac-57ce1d6b95e0

Инструкция по работе с шаблонами в Collabza.

Сборка фич Интеграции Варианты блоков Доска объявлений (агрегатор)