Чтобы встроить карту мобильности на свой сайт без создания всего интерфейса, используйте iframe ROOTE. Встраивание может принимать поиск города и фильтры, соответствующие странице: велосипеды для велогида, туалеты для гидов по туалетам, автобусы и трамваи для транспорта.
Примеры в этом руководстве используют embed.roote.ai — домен, интегрированный в руководства ROOTE. Общая документация также описывает интеграцию map.roote.ai и различает параметры камеры и параметры полного поиска.
Добавление адаптивного iframe
Этот блок открывает поиск велосипедов в Бордо с масштабом 15. URL формируется в коде; заголовок iframe описывает содержимое для экранных читалок. Адаптируйте этот заголовок под язык вашей страницы.
<iframe
title="Carte ROOTE — vélos à Bordeaux"
src="https://embed.roote.ai/?q=Bordeaux&modes=bicycle&zoom=15"
width="100%"
height="480"
loading="lazy"
allow="geolocation"
style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>В HTML-атрибутах разделители & пишутся как &. Ширина 100 % следует ширине контейнера. Поддерживайте высоту, удобную для мобильных устройств, и избегайте размещения важных элементов управления вне видимой области.
Выбор режимов, соответствующих странице
| Потребность | Параметр встраивания |
|---|---|
| Велосипеды | modes=bicycle |
| Туалеты | modes=toilets |
| Автобусы | modes=bus |
| Трамваи | modes=tram |
| Автобусы и трамваи | modes=bus,tram |
| Велосипеды и туалеты | modes=bicycle,toilets |
Эти значения соответствуют маршруту embed ROOTE, связанному с категориями мобильности, сервисов и транзита. Они не заменяют параметры REST: Services использует types, а Transit — modes. Карта с центром на городе не гарантирует наличие результатов в каждой категории.
Разграничение камеры и источника поиска
lat и lon задают положение камеры. Однако они недостаточны для создания полноценных поисковых запросов около точки. Для восстановления известного поиска используйте search_lat, search_lon и search_label вместе с режимами и масштабом.
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramУказанные координаты — точка отсчёта в Бордо, а не позиция пользователя. Если вы также задаёте параметры камеры, можно показывать другую область, сохраняя точку для расчёта расстояния. Делайте это только если требуется такое разделение.
Документация параметров карты ROOTE
Создание URL без потери специальных символов
Используйте объекты URL и URLSearchParams вместо ручной конкатенации. Это кодирует пробелы, акценты и разделители. Код рассчитан на браузер и формирует адрес iframe на основе введённого места.
const embedUrl = new URL('https://embed.roote.ai/');
embedUrl.searchParams.set('q', 'Place des Quinconces, Bordeaux');
embedUrl.searchParams.set('modes', 'bicycle,toilets');
embedUrl.searchParams.set('zoom', '15');
document.querySelector('iframe').src = embedUrl.toString();Сохранение контекста для полной карты
Ссылка на map.roote.ai должна сохранять текущее состояние поиска, если оно известно. Воссоздание URL без параметров потеряет город, режимы или масштаб. Поддерживайте общий объект URL при обновлениях на странице.
const fullMapUrl = new URL('https://map.roote.ai/');
fullMapUrl.search = embedUrl.search;
const link = document.querySelector('[data-open-map]');
link.href = fullMapUrl.toString();
link.target = '_blank';
link.rel = 'noopener noreferrer';Этот код сохраняет параметры, известные родительской странице. Если пользователь меняет поиск внутри iframe, родитель не может напрямую прочитать URL iframe с другого домена. Для получения состояния нужен явно реализованный и документированный механизм, например, обмен postMessage с проверкой источника. Не придумывайте имена событий, не предоставленные встраиванием.
Управление геолокацией и мобильными взаимодействиями
allow="geolocation" разрешает iframe запрашивать геолокацию при согласии и политиках разрешений сайта. Отказ должен не мешать использованию поиска города. Не запрашивайте позицию при загрузке страницы, если пользователь не инициировал этот запрос.
В статье добровольное включение карты может предотвратить перехват жестов прокрутки и масштабирования во время чтения. Управление должно оставаться доступным с клавиатуры и быть явно обозначено. Проверяйте изменения ориентации и узкие экраны, а не только настольную версию.
Проверка результата и обработка ошибок
Тестируйте каждый фильтр, известный город, область с малым количеством данных, некорректный поиск и недоступные категории. Карта без маркеров сама по себе не показывает, пустой ли поиск или произошла ошибка. Сохраняйте сообщения встраивания и обеспечьте доступ к полной карте.
Отличение отсутствия результатов от ошибки API
Пример руководства по поиску туалетов
Часто задаваемые вопросы
Нужно ли вставлять API-ключ в iframe?
Публичные URL, показанные здесь, не содержат ключей. Не размещайте секреты в URL встраивания или в клиентском коде.
Увеличивает ли zoom=15 радиус поиска?
Масштаб задаёт вид. Не путайте его с радиусом API-запроса; проверяйте параметры поиска интерфейса.
Родитель знает об изменениях внутри iframe?
Он знает только параметры, которые передаёт. Внутренние изменения требуют документированного механизма обмена между доменами.