Embeddable map & route widget
Add an interactive map with address search and turn-by-turn routing to any website — in one line of code. Themeable, responsive, and powered by OpenStreetMap.
Live preview
Copy, paste, done
Drop in the script tag (recommended) or a plain iframe. No build step.
<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><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>
Tip: create a key in your dashboard and restrict it to your domain — safe to expose in the browser.
Configuration
| Attribute | Values | Description |
|---|---|---|
| data-key | YOUR_API_KEY | Your OSRMRoute API key (restrict it to your domain in the dashboard). |
| data-theme | dark | light | Color theme. Default dark. |
| data-accent | 06b6d4 | Accent color (hex, no #) for buttons and the route line. |
| data-center | 40.37,49.89 | Initial map center "lat,lon". |
| data-profile | driving | cycling | walking | Default travel profile. |
| data-lang | en | az | tr | ru … | Language for search results. |
| data-height | 480px | Widget height (or set it via CSS). |
| data-powered | true | false | Show the “Powered by OSRMRoute” badge. |
For the iframe, pass the same names as query parameters (e.g. ?theme=light&accent=22c55e).
What you can build
Store locator
Show your locations and let visitors search and route to the nearest one.
Delivery ETA
Enter an address and get distance & travel time to your depot instantly.
Route planner
A full From→To directions map for logistics, travel or field teams.
Contact page
Replace a static Google embed with your own branded, interactive map.
Ship it in minutes
Get a free API key, restrict it to your domain, paste the snippet.