Can you embed OpenStreetMap in an iframe?

1. 1Open openstreetmap.org and move the map to the area you want.
2. 2Click the Share button at the side of the map.
3. 3To show a pin, select Include marker. Then move the marker.
4. 4Under Link or HTML, clickHTML
5. 5Copy the code from the Output box. It starts with <iframe>.
6. 6Paste the code into the HTML of your page.

<iframe
  width="425"
  height="350"
  src="https://www.openstreetmap.org/export/embed.html?bbox={west},{south},{east},{north}&amp;layer=mapnik&amp;marker={lat},{lon}"
  style="border: 1px solid black"
  title="{map title}">
</iframe>
<br/><small><a href="https://www.openstreetmap.org/#map={zoom}/{lat}/{lon}">View Larger Map</a></small>

Remove the marker parameter when you do not want a pin. The bbox sets the area that the map shows.

The Share panel makes the bbox from the map area that you see.

Good to know

• The embed shows a map that visitors can move and zoom.
• To show more than one marker, use your own map library.
• Use OpenStreetMap data only as the OpenStreetMap license allows.

Sources

• OpenStreetMap Wiki · Exportwiki.openstreetmap.org/wiki/Export
• OpenStreetMap Wiki · Deploying your own Slippy Mapwiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map
• openstreetmap-website · leaflet.share.jsgithub.com/openstreetmap/openstreetmap-website/blob/master/app/assets/javascripts/leaflet.share.js
• MDN · X-Frame-Optionsdeveloper.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options
• iframecheck live check · both links9 Nov 2026, 02:52 UTC

Profile updated Oct 15, 2026