Щоб інтегрувати карту мобільності у ваш сайт без створення повного інтерфейсу, використовуйте 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: Сервіси використовують types, а Транспорт – modes. Карта з центром на місті не гарантує, що у кожній категорії будуть результати.
Розрізняти камеру і точку пошуку
lat і lon позиціонують камеру. Вони не достатні у задокументованому контракті карти, щоб створити пошук поблизу. Щоб відновити відомий пошук, використовуйте search_lat, search_lon і search_label разом з modes і zoom.
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 на іншому домені. Для отримання стану потрібен явно реалізований і документований механізм, наприклад, обмін postMessage із валідацією джерела. Не вигадуйте івенти, яких немає в embed.
Керування локалізацією та мобільними взаємодіями
allow="geolocation" дозволяє iframe запитувати локалізацію за згодою і політикою дозволів сайту. Відмова не повинна заважати пошуку міста. Не запитуйте позицію одразу при завантаженні, якщо користувач цього не обрав.
У статті свідоме активування карти може уникнути перехоплення жестів прокручування чи масштабування під час читання. Керування має бути доступним з клавіатури й зрозуміло позначеним. Перевіряйте орієнтацію та вузький екран, а не лише десктоп-версію.
Перевірка результату та станів помилки
Перевірте кожен фільтр, відоме місто, область з мало даних, неправильний пошук і відсутність категорії. Карта без маркерів сама по собі не показує, чи пошук порожній чи є збій. Зберігайте повідомлення embed і доступ до повної карти.
Розрізнення відсутності результату і помилки API
Приклад гіда для пошуку туалетів
Поширені питання
Чи треба вставляти API-ключ у iframe?
Публічні URL, показані тут, не містять його. Не розміщуйте секретні ключі в URL embed або клієнтському коді.
zoom=15 збільшує радіус пошуку?
Масштаб регулює вид. Не ототожнюйте його з радіусом API-запиту; перевіряйте параметри пошуку у застосованому інтерфейсі.
Чи знає батько про зміни у iframe?
Він знає лише параметри, які передає. Внутрішні зміни вимагають задокументованого механізму обміну між двома доменами.