Siteye mobilite haritası nasıl entegre edilir?

Tüm arayüzü oluşturmak zorunda kalmadan sitenize mobilite haritası entegre etmek için bir ROOTE iframe kullanın. Embed sayfa içeriğine uygun şehir araması ve filtreleri alabilir: bisikletler bir bisiklet rehberi için, tuvaletler WC rehberi için, otobüs ve tramvaylar ise toplu taşıma için.

Bu rehberin örnekleri embed.roote.ai kullanıyor, ROOTE rehberlerine entegre edilmiş domain. Genel dokümantasyon ayrıca map.roote.ai entegrasyonunu anlatır ve kamera parametrelerini tam arama parametrelerinden ayırır.

Responsive bir iframe ekleme

Bu blok, zoom 15 ile Bordeaux'da bir bisiklet araması açar. URL kod içinde oluşturulur; iframe başlığı ekran okuyucu kullanıcıları için içeriğini açıklar. Bu başlığı sayfanızın diline uygun şekilde uyarlayın.

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

Bir HTML özniteliğinde ayrıcılar & olarak değil & şeklinde yazılır. %100 genişlik konteyner genişliğini takip eder. Mobilde kullanılabilir bir yükseklik tutun ve zorunlu kontrolleri görünmeyen alana koymaktan kaçının.

Sayfaya uygun modları seçme

Bu değerler; mobilite, hizmetler ve toplu taşıma kategorilerine bağlı ROOTE embed yollarının değerleridir. REST parametrelerinin yerini almazlar: Hizmetler için types, Toplu taşıma için modes kullanılır. Şehir merkezli bir harita her kategoride sonuç garantisi vermez.

Kamera ile arama kaynağını ayırma

lat ve lon kameranın konumunu belirler. Ancak bu, belgelenmiş harita sözleşmesinde yakınlık araması oluşturmak için yeterli değildir. Bilinen bir aramayı geri yüklemek için search_lat, search_lon ve search_label ile birlikte modlar ve zoom kullanın.

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

Yukarıdaki koordinatlar Bordeaux'da referans bir noktadır, kullanıcının konumu değildir. Kamera parametreleri eklenirse, mesafeler için kullanılan noktayı koruyarak farklı bir alan gösterebilirsiniz. Bu ayrımı sadece isteniyorsa yapın.

ROOTE harita parametre dokümantasyonu

Özel karakterlerin kaybolmamasını sağlayarak URL oluşturma

Elle birleştirmek yerine URL ve URLSearchParams kullanın. Böylece boşluklar, aksanlar ve ayırıcılar kodlanır. Bu kod tarayıcıda çalışır ve girilen konuma göre iframe adresini oluşturur.

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

Tam harita bağlamını koruma

map.roote.ai bağlantısı, geçerli arama durumunu almalıdır. Parametresiz yeniden oluşturulan URL şehir, modlar veya zoom bilgisini kaybeder. Güncellemelerde ortak bir URL nesnesi kullanın.

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

Bu kod üst sayfa tarafından bilinen parametreleri korur. Kullanıcı iframe içinde aramayı değiştirirse, üst sayfa başka bir domain üzerinde doğrudan URL'yi okuyamaz. Durumu almak için açıkça uygulanmış ve belgelenmiş bir yöntem gerekir; örneğin, güvenlik doğrulamalı postMessage iletişimi. Embed'in sağlamadığı etkinlik isimleri uydurmayın.

Konum ve mobil etkileşimleri yönetme

allow="geolocation" iframe'in konumu sormasına izin verir; izin ve site politikalarına bağlıdır. Reddetme durumunda şehir araması kullanılabilir kalmalıdır. Ziyaretçi seçmediği sürece sayfa açılır açılmaz konumu sormayın.

Bir makalede haritanın gönüllü etkinleştirilmesi, okuma sırasında kaydırma veya yakınlaştırma hareketlerinin yakalanmasını önleyebilir. Kontrol klavyeyle erişilebilir ve açık şekilde adlandırılmış olmalı. Yalnızca masaüstüne değil, yön değişikliklerine ve dar ekranlara da dikkat edin.

Sonucu ve hata durumlarını kontrol etme

Her filtreyi, bilinen bir şehri, az verili bölgeyi, geçersiz aramayı ve mevcut olmayan kategoriyi test edin. İşaretçisi olmayan harita tek başına arama boş veya hata mı bunu göstermez. Embed mesajlarını ve tam haritaya erişimi koruyun.

Sonuç yokluk ile API hatasını ayırt etme

embed, API ve MCP arasından seçim

Tuvalet bulma rehberi örneği

Sıkça sorulan sorular

Iframe'de API anahtarı koymak gerekli mi?

Burada gösterilen herkese açık URL’lerde yoktur. Embed URL'sine veya istemci koduna gizli anahtar koymayın.

zoom=15 arama yarıçapını artırır mı?

Zoom görünümü ayarlar. Bir API isteği yarıçapı olarak algılamayın; kullanılan arayüzün arama parametrelerini kontrol edin.

Üst sayfa iframe içindeki değişiklikleri bilir mi?

Gönderdiği parametreleri bilir. İç değişiklikler iki domain arasında belgelenmiş bir iletişim mekanizması gerektirir.