Cum să integrezi o hartă de mobilitate în site-ul tău?

Pentru a integra o hartă de mobilitate în site-ul tău fără a construi toată interfața, folosește un iframe ROOTE. Embed-ul poate primi o căutare de oraș și filtre adaptate paginii: biciclete pentru un ghid bicicletă, toalete pentru un ghid WC, autobuz și tramvai pentru transport.

Exemplele din acest ghid folosesc embed.roote.ai, domeniul integrat în ghidurile ROOTE. Documentația generală descrie și integrarea map.roote.ai și diferențiază parametrii camerei de cei ai unei căutări complete.

Adăugarea unui iframe responsive

Acest bloc deschide o căutare bicicletă în Bordeaux cu zoom 15. URL-ul este construit în cod; titlul iframe-ului descrie conținutul pentru cititoarele de ecran. Adaptă acest titlu la limba paginii tale.

<iframe
  title="Carte ROOTE — vélos à Bordeaux"
  src="https://embed.roote.ai/?q=Bordeaux&amp;modes=bicycle&amp;zoom=15"
  width="100%"
  height="480"
  loading="lazy"
  allow="geolocation"
  style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>

Într-un atribut HTML, separatoarele & se scriu &. Lățimea de 100% urmează containerul. Păstrează o înălțime utilizabilă pe mobil și evită plasarea controlor indispensabili în afara zonei vizibile.

Alege modurile corespunzătoare paginii

Aceste valori sunt cele ale parcursului embed ROOTE conectat la familiile mobilitate, servicii și tranzit. Ele nu înlocuiesc parametrii REST: Servicii folosește types, în timp ce Tranzit folosește modes. O hartă centrată pe un oraș nu garantează că fiecare familie are rezultate acolo.

Distingerea camerei și originii căutării

lat și lon poziționează camera. Ele nu sunt suficiente, în contractul documentat al hărții, pentru a crea o căutare de proximitate. Pentru a restaura o căutare cunoscută, folosește search_lat, search_lon și search_label, împreună cu modurile și zoom-ul.

https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram

Coordonatele de mai sus sunt un punct de referință în Bordeaux, nu poziția utilizatorului. Dacă adaugi și parametri de cameră, poți afișa o altă zonă păstrând punctul utilizat pentru distanțe. Fă asta doar dacă separarea este dorită.

Documentația parametrilor hărții ROOTE

Construirea unui URL fără a pierde caractere speciale

Folosește URL și URLSearchParams în loc de concatenare manuală. Acestea codifică spațiile, accentele și separatoarele. Acest cod este destinat browserului și creează adresa iframe-ului dintr-un loc introdus.

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();

Păstrarea contextului pentru harta completă

Un link către map.roote.ai trebuie să replice starea curentă a căutării dacă o cunoști. Refacerea unui URL fără parametrii săi pierde orașul, modurile sau zoom-ul. Păstrează un obiect URL comun la actualizările făcute de pagina ta.

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';

Acest cod păstrează parametrii cunoscuți de pagina părinte. Dacă utilizatorul modifică căutarea în iframe, părinte nu poate citi direct URL-ul de pe alt domeniu. Pentru a recupera această stare, este nevoie de un mecanism documentat și explicit implementat, de ex. un schimb postMessage cu validarea originii. Nu inventa nume de evenimente nesuportate de embed.

Gestionarea localizării și a interacțiunilor pe mobil

allow="geolocation" permite iframe-ului să ceară localizarea, cu consimțământul și politica de permisiuni ale site-ului. Un refuz trebuie să lase căutarea orașului utilizabilă. Nu cere poziția la încărcarea paginii dacă cititorul nu a ales asta.

Pe un articol, o activare voluntară a hărții poate preveni captarea gesturilor de derulare sau zoom în timpul lecturii. Controlul trebuie să rămână accesibil de la tastatură și clar denumit. Verifică schimbările de orientare și ecranele înguste, nu doar versiunea desktop.

Verificarea rezultatului și a stărilor de eroare

Testează fiecare filtru, un oraș cunoscut, o zonă cu puține date, o căutare invalidă și o familie indisponibilă. O hartă fără marker nu spune singură dacă căutarea este goală sau într-o eroare. Păstrează mesajele embed-ului și accesul utilizabil la harta completă.

Distinge lipsa rezultatului de eroarea API

Alegerea între embed, API și MCP

Exemplu de ghid pentru găsirea toaletelor

Întrebări frecvente

Este necesară o cheie API în iframe?

URL-urile publice afișate aici nu conțin una. Nu pune un secret în URL de embed sau cod client.

zoom=15 mărește raza de căutare?

Zoom-ul reglează vederea. Nu-l asocia cu raza unei cereri API; verifică parametrii căutării din interfața folosită.

Părintele cunoaște modificările din iframe?

Cunoaște parametrii pe care îi transmite. Modificările interne cer un mecanism documentat de schimb între cele două domenii.