Cara Mengintegrasikan Peta Mobilitas di Situs Anda?

Untuk mengintegrasikan peta mobilitas di situs Anda tanpa membangun seluruh antarmuka, gunakan iframe ROOTE. Embed dapat menerima pencarian kota dan filter yang disesuaikan dengan halaman: sepeda untuk panduan sepeda, toilet untuk panduan WC, bus dan trem untuk transportasi.

Contoh dalam panduan ini menggunakan embed.roote.ai, domain yang terintegrasi dalam panduan ROOTE. Dokumentasi umum juga menjelaskan integrasi map.roote.ai dan membedakan parameter kamera dari parameter pencarian lengkap.

Menambahkan iframe responsif

Blok ini membuka pencarian sepeda di Bordeaux dengan zoom 15. URL dibangun dalam kode; judul iframe menjelaskan isinya untuk pembaca layar. Sesuaikan judul ini dengan bahasa halaman Anda.

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

Dalam atribut HTML, pemisah & ditulis sebagai &. Lebar 100% mengikuti lebar kontainer. Pertahankan tinggi yang dapat digunakan di perangkat mobile dan hindari menempatkan kontrol penting di luar area yang terlihat.

Memilih mode yang sesuai dengan halaman

Nilai-nilai ini adalah milik rute embed ROOTE yang terhubung dengan kategori mobilitas, layanan, dan transit. Mereka bukan pengganti parameter REST: Layanan menggunakan tipe, sedangkan Transit menggunakan mode. Peta yang berpusat pada sebuah kota tidak menjamin setiap kategori memiliki hasil di sana.

Membedakan kamera dan asal pencarian

lat dan lon menentukan posisi kamera. Mereka tidak cukup, dalam kontrak peta terdokumentasi, untuk membuat pencarian kedekatan. Untuk mengembalikan pencarian yang diketahui, gunakan search_lat, search_lon, dan search_label, bersama dengan mode dan zoom.

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

Koordinat di atas adalah titik referensi di Bordeaux, bukan posisi pengguna. Jika Anda juga menambahkan parameter kamera, Anda dapat menampilkan area berbeda sambil mempertahankan titik yang digunakan untuk jarak. Lakukan ini hanya jika pemisahan tersebut diinginkan.

Dokumentasi parameter peta ROOTE

Membangun URL tanpa kehilangan karakter khusus

Gunakan URL dan URLSearchParams daripada menggabungkan secara manual. Ini mengkode spasi, aksen, dan pemisah. Kode ini ditujukan untuk browser dan membuat alamat iframe dari lokasi yang dimasukkan.

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

Menyimpan konteks menuju peta lengkap

Tautan ke map.roote.ai harus mempertahankan keadaan pencarian saat ini jika Anda mengetahuinya. Membuat ulang URL tanpa parameter-nya akan kehilangan kota, mode, atau zoom. Simpan objek URL yang sama saat pembaruan dilakukan oleh halaman Anda.

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

Kode ini menyimpan parameter yang diketahui oleh halaman induk. Jika pengguna mengubah pencarian di dalam iframe, induk tidak dapat langsung membaca URL-nya di domain lain. Untuk mengambil keadaan ini, dibutuhkan mekanisme yang secara eksplisit diimplementasikan dan didokumentasikan, misalnya pertukaran postMessage dengan validasi asal. Jangan cipta nama event yang tidak disediakan oleh embed.

Mengelola lokasi dan interaksi pada perangkat mobile

allow="geolocation" mengizinkan iframe meminta lokasi, dengan persetujuan dan kebijakan izin situs. Penolakan harus tetap membiarkan pencarian kota berfungsi. Jangan minta posisi segera setelah masuk ke halaman jika pengguna belum memilih tindakan ini.

Pada artikel, pengaktifan peta secara sengaja dapat mencegah gulir atau zoom-nya mengganggu gestur selama membaca. Kontrol harus tetap dapat diakses dengan keyboard dan jelas namanya. Periksa perubahan orientasi dan layar sempit, bukan hanya versi desktop.

Memeriksa hasil dan keadaan kegagalan

Uji setiap filter, kota yang dikenal, area dengan data sedikit, pencarian tidak valid, dan kategori tidak tersedia. Peta tanpa penanda saja tidak menyatakan apakah pencarian kosong atau gagal. Pertahankan pesan embed dan akses yang dapat digunakan ke peta lengkap.

Membedakan tidak ada hasil dengan kesalahan API

Memilih antara embed, API, dan MCP

Contoh panduan mencari toilet

Pertanyaan yang sering ditanyakan

Perlukah memasang kunci API dalam iframe?

URL publik yang ditampilkan di sini tidak mengandung kunci. Jangan menaruh rahasia dalam URL embed atau kode sisi klien.

Apakah zoom=15 memperbesar radius pencarian?

Zoom mengatur tampilan peta. Jangan anggap sama dengan radius permintaan API; periksa parameter pencarian dari antarmuka yang digunakan.

Apakah induk mengetahui perubahan dalam iframe?

Induk mengetahui parameter yang dikirimnya. Perubahan internal membutuhkan mekanisme pertukaran yang didokumentasikan antara kedua domain.