Miten integroida mobiilikartta sivustolle?

Jos haluat lisätä mobiilikartan sivustollesi rakentamatta koko käyttöliittymää itse, käytä ROOTE iframeä. Upotus tukee kaupunkihakua ja suodattimia, jotka sopivat sivuun: pyörät pyöräilyoppaaseen, WC:t wc-oppaaseen, bussit ja raitiovaunut joukkoliikenteeseen.

Tässä oppaassa esimerkit käyttävät embed.roote.ai -verkkotunnusta, joka on ROOTE-oppaiden integroitu domain. Yleinen dokumentaatio kuvaa myös map.roote.ai:n integroinnin ja erottaa kameran parametrit täydellisestä hausta.

Lisää responsiivinen iframe

Tämä koodi avaa pyöräilyn haun Bordeaux’ssa zoomilla 15. URL muodostetaan koodissa; iframe:n otsikko kuvaa sisältöä ruudunlukuohjelmille. Muokkaa otsikko sivusi kielelle sopivaksi.

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

HTML-attribuutissa &-merkit kirjoitetaan muodossa &. Leveys 100 % mukautuu konttiin. Pidä korkeus sellaisena, että se toimii mobiilissa, ja vältä oleellisten kontrollien sijoittamista piiloon.

Valitse sivulle sopivat tilat

Nämä arvot ovat ROOTE embed -haun polkuihin liittyviä ja yhdistetty perheisiin mobiilisuus, palvelut ja joukkoliikenne. Ne eivät korvaa REST-parametreja: Services käyttää types, Transit käyttää modes. Kaupunkikeskeinen kartta ei takaa tuloksia kaikille perheille.

Erota kameran sijainti ja hakukohde

lat ja lon asettavat kameran sijainnin. Ne eivät riitä dokumentoidun sopimuksen mukaan luomaan lähialuehakua. Tunnetun haun palauttamiseksi käytä search_lat, search_lon ja search_label -parametreja modes- ja zoom-parametrien kanssa.

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

Yllä oleva sijainti on Bordeaux’n referenssipiste, ei käyttäjän paikka. Jos lisäät myös kameran parametrit, voit näyttää toisen alueen säilyttäen etäisyyksissä käytetyn pisteen. Tee tämä vain, jos erottelu on tarkoitettu.

ROOTE-kartan parametrien dokumentaatio

Muodosta URL vahingoittamatta erikoismerkkejä

Käytä URL- ja URLSearchParams-luokkia manuaalisen merkkijonojen yhdistelyn sijaan. Ne koodaavat välilyönnit, aksentit ja erottimet oikein. Tämä selainpuolen koodi luo iframe-osoitteen syötetyn sijainnin perusteella.

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

Säilytä konteksti täydelliseen karttaan

Linkin map.roote.ai pitää sisältää haun nykyinen tila, jos tunnet sen. Parametrittoman URL:n muodostaminen hukkaa kaupungin, tilat tai zoomin. Käytä yhteistä URL-objektia, jota päivität sivusi toiminnassa.

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

Tämä koodi säilyttää sivun perusteena tunnetut parametrit. Jos käyttäjä muuttaa hakua iframe:n sisällä, pääsivu ei voi lukea iframe:n URL:ää toiselta domainilta. Tilatilan noutamiseen pitää olla erikseen toteutettu ja dokumentoitu mekanismi, esim. postMessage-vaihto, jonka lähettäjä validoidaan. Älä keksi iframe:n tarjoamattomia tapahtumanimiä.

Hallinnoi sijaintia ja mobiilikäyttöä

allow="geolocation" antaa iframelle oikeuden pyytää sijaintia käyttäjän suostumuksella ja sivuston lupakäytännön mukaisesti. Kieltäytyminen ei saa estää kaupunkihakua. Älä kysy sijaintia sivun avaamisen yhteydessä ilman lukijan suostumusta.

Artikkelissa kartan vapaaehtoinen aktivointi voi estää sen vierityksen tai zoomauksen tarttumisen lukuliikkeisiin. Kontrollin pitää olla näppäimistöllä saavutettavissa ja selvästi nimetty. Testaa myös näytön suunta- ja kapeusmuutokset, ei vain tietokoneversiota.

Tarkista tulokset ja virhetilanteet

Testaa kaikki suodattimet, tunnettu kaupunki, alue, jolla on vähän tietoja, virheellinen haku ja puuttuva perhe. Kartta ilman merkkejä ei yksin kerro, onko haku tyhjä vai järjestelmässä vika. Säilytä embedin viestit ja käyttökelpoinen linkki täydelliseen karttaan.

Erottele tulosten puuttuminen ja API-virhe

Valitse embed, API tai MCP

Esimerkkiopas WC:n löytämiseksi

UKK

Tarvitaanko API-avain iframeen?

Tässä esitetyt julkiset URL:t eivät sisällä avainta. Älä laita salaista tietoa upotetun URL:n tai asiakaskoodin sisälle.

Lisääkö zoom=15 hakusädettä?

Zoom määrittää näkymän. Älä sekoita sitä API-kyselyn säteeseen; tarkista käytetyn käyttöliittymän hakparametrit.

Näkeekö pääsivu iframe:n tekemät muutokset?

Se näkee sen, mitä se lähettää. Sisäiset muutokset vaativat dokumentoidun mekanismin viestien vaihtoon eri domainien välillä.