Embeddable map and route widget

Add an OSRMRoute map with address search and routing using a script or iframe. Themes and responsive sizing are configurable; API usage follows your plan.

Live preview

Copy and embed

Use the script or an iframe. No build step is required.

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>

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

Use a dedicated widget key, restrict it to your domain and monitor usage. Browser keys are visible to visitors. Dashboard

Configuration

Attribute	Values	Description
data-key	YOUR_API_KEY	Your OSRMRoute API key; restrict it to your domain.
data-theme	dark \| light	Color theme; dark is the default.
data-accent	06b6d4	Hex accent color without # for buttons and the route line.
data-center	40.37,49.89	Initial map center in lat,lon order.
data-profile	driving \| cycling \| walking	Default travel profile; availability depends on regional coverage.
data-lang	en \| az \| tr \| ru …	Language for search results.
data-height	480px	Widget height; you can also set it with CSS.
data-powered	true \| false	Show or hide the Powered by OSRMRoute badge.

For an iframe, use the same option names as query parameters. ?theme=light&accent=22c55e

Use cases

Store locator

Help visitors find and route to your locations.

Delivery travel time

Estimate road distance and travel time to your depot.

Route planner

Add origin-to-destination directions for travel or field teams.

Contact page

Show an interactive map with your company’s visual theme.

Start integrating

Create an API key, restrict it to your domain and add the snippet.

Get your API key Docs