Gömülebilir harita ve rota widget’ı

OSRMRoute haritasını adres araması ve rotalarla script veya iframe üzerinden ekleyin. Tema ve duyarlı boyutlar ayarlanabilir; API kullanımı planınıza tabidir.

Canlı önizleme

Kopyalayın ve yerleştirin

Script veya iframe kullanın. Derleme gerekmez.

Script + div

<div data-osrmroute-map
     data-key="YOUR_API_KEY"
     data-theme="dark"
     style="height:480px"></div>
<script src="https://osrmroute.com/embed.js" async></script>

Basit iframe

<iframe
  src="https://osrmroute.com/embed/route?key=YOUR_API_KEY&theme=dark"
  style="width:100%;height:480px;border:0;border-radius:16px"
  loading="lazy" allow="geolocation"></iframe>

Widget için ayrı anahtar kullanın, alan adınızla kısıtlayın ve kullanımı izleyin. Tarayıcı anahtarları ziyaretçilere görünür. Panel

Yapılandırma

Öznitelik	Değerler	Açıklama
data-key	YOUR_API_KEY	OSRMRoute API anahtarınız; alan adınızla kısıtlayın.
data-theme	dark \| light	Renk teması; varsayılan koyudur.
data-accent	06b6d4	Düğme ve rota çizgisi için # olmadan hex vurgu rengi.
data-center	40.37,49.89	Başlangıç harita merkezi lat,lon sırasıyla.
data-profile	driving \| cycling \| walking	Varsayılan profil; kullanılabilirlik bölgesel kapsama bağlıdır.
data-lang	en \| az \| tr \| ru …	Arama sonuçlarının dili.
data-height	480px	Widget yüksekliği; CSS ile de ayarlanabilir.
data-powered	true \| false	Powered by OSRMRoute rozetini gösterin veya gizleyin.

Iframe için aynı seçenek adlarını sorgu parametresi olarak gönderin. ?theme=light&accent=22c55e

Kullanım örnekleri

Şube bulucu

Ziyaretçilerin adreslerinizi bulmasına ve rota çizmesine yardımcı olun.

Teslimat yol süresi

Deponuza yol mesafesini ve tahmini seyahat süresini hesaplayın.

Rota planlayıcı

Seyahat veya saha ekipleri için başlangıçtan varışa yönlendirme ekleyin.

İletişim sayfası

Şirketinizin görsel temasına uygun etkileşimli harita gösterin.

Entegrasyona başlayın

API anahtarı oluşturun, alan adınızla kısıtlayın ve örnek kodu ekleyin.

API anahtarını al Dokümanlar