Einbettbares Karten- und Routenwidget

Fügen Sie eine OSRMRoute-Karte mit Adresssuche und Routing per Skript oder iframe ein. Design und responsive Größe sind anpassbar; die API-Nutzung folgt Ihrem Tarif.

Live-Vorschau

Kopieren und einbetten

Verwenden Sie Skript oder iframe. Kein Build-Schritt nötig.

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

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

Nutzen Sie einen separaten Widget-Schlüssel, begrenzen Sie ihn auf Ihre Domain und überwachen Sie die Nutzung. Browserschlüssel sind für Besucher sichtbar. Dashboard

Konfiguration

Attribut	Werte	Beschreibung
data-key	YOUR_API_KEY	Ihr OSRMRoute-API-Schlüssel; auf Ihre Domain beschränken.
data-theme	dark \| light	Farbdesign; standardmäßig dunkel.
data-accent	06b6d4	Hex-Akzentfarbe ohne # für Schaltflächen und Routenlinie.
data-center	40.37,49.89	Anfänglicher Kartenmittelpunkt in der Reihenfolge lat,lon.
data-profile	driving \| cycling \| walking	Standardprofil; Verfügbarkeit hängt von regionaler Abdeckung ab.
data-lang	en \| az \| tr \| ru …	Sprache der Suchergebnisse.
data-height	480px	Widget-Höhe; auch über CSS einstellbar.
data-powered	true \| false	Powered by OSRMRoute anzeigen oder ausblenden.

Übergeben Sie bei iframes dieselben Optionen als Anfrageparameter. ?theme=light&accent=22c55e

Anwendungsfälle

Standortsuche

Helfen Sie Besuchern, Ihre Standorte zu finden und dorthin zu navigieren.

Lieferfahrzeit

Schätzen Sie Straßenentfernung und Fahrzeit zu Ihrem Depot.

Routenplaner

Ergänzen Sie Wegbeschreibungen für Reisen oder Außenteams.

Kontaktseite

Zeigen Sie eine interaktive Karte im Design Ihres Unternehmens.

Integration starten

Erstellen Sie einen API-Schlüssel, begrenzen Sie die Domain und ergänzen Sie den Code.

API-Schlüssel holen Doku