Embed OpenStreetMap on Your Website

Overview

If you want a fast, free way to embed OpenStreetMap on your website, you have two great paths: a lightweight OpenStreetMap iframe or a flexible Leaflet map embed. Both are solid, both are simple. The right choice depends on how much interactivity you need and how much code you want to touch.

OpenStreetMap (OSM) is open data. You get cost control (no key required), plenty of freedom, and straightforward attribution. For many sites—contact pages, store locators, event venues—OSM is a better fit than services that require billing setup. If you’re comparing approaches in general, see our broader guide to map embeds in How to embed a map on a website at /maps/embed-map-on-website.

When is Google Maps a better fit? If you need built‑in place details, reviews, or turn‑by‑turn directions, Google’s ecosystem is hard to beat. If that’s you, use our Google‑specific tutorial at /maps/embed-google-map-on-website. Otherwise, OSM gives you speed, control, and zero‑drama setup.

Here’s a quick snapshot:

For attribution requirements, read the official OSM notice at OpenStreetMap copyright. For the Leaflet API, see the Leaflet quick start. If you opt for an iframe, MDN has a crisp reference for attributes like loading and title: MDN: iframe.

Add OSM embeds instantly with MicroEdits

MicroEdits makes map embeds feel like magic. It’s built for existing websites and non‑technical folks—no code, no templates, no deployments. Tell MicroEdits what you want and watch it appear. For example: Add a map of our studio to the Contact page, centered on Shoreditch, with a caption.

• No coding required. Describe your change in plain English.
• Instant results. See the map live on your site immediately.
• Preview and share. Try it, share a preview link, and revert anytime.
• Works anywhere. WordPress, Shopify, custom stacks—if it’s a website, it works.
• No copy‑paste. MicroEdits generates and applies the change for you.

If you’re weighing OSM against Google for your use case, we also cover the Google path in Show Google Maps on a website, including mobile behavior and interaction tips: /maps/show-google-maps-on-website.

Method 1: OSM iframe

The OpenStreetMap iframe is the simplest way to embed a map.

1. Get the share link

• On openstreetmap.org, navigate and zoom to your area.
• Click Share and adjust the bounding box and marker.
• Copy the “Embed HTML” URL.

2. Make it responsive
   Use a fluid width and preserve aspect ratio. The iframe’s native controls handle panning and zooming.

.map-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
  border-radius: 8px;
}
.map-caption {
  margin-top: 0.5rem;
  color: #555;
  font:
    0.875rem/1.4 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
}

<div>
  <iframe
    class="map-embed"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.12,51.50,-0.08,51.52&layer=mapnik&marker=51.5074,-0.0900"
    title="Map showing our office location"
    loading="lazy"
    aria-label="Interactive map of our office"
  >
  </iframe>
  <p class="map-caption">
    ©
    <a
      href="https://www.openstreetmap.org/copyright"
      target="_blank"
      rel="noopener noreferrer"
      >OpenStreetMap</a
    >
    contributors
  </p>
</div>

3. Add attribution
   Keep the visible credit. If you customize tiles or use a third‑party tile provider, include their attribution too.

Tip: The iframe is ideal when you want to embed OpenStreetMap on your website with almost no setup. It’s also easier to maintain: no scripts, no dependency updates.

Method 2: Leaflet for interactive maps

Leaflet gives you a fully interactive map with layers, custom markers, and popups. It’s perfect when you need multiple locations or custom behavior.

1. Add the container

<div id="map" class="map"></div>

2. Basic styles

.map {
  height: 420px;
  width: 100%;
  border-radius: 8px;
  background: #f7f7f7;
}

3. Initialize the map
   Ensure Leaflet’s JS and CSS are included by your site/theme/build before this runs.

// Create the map (scroll-wheel disabled to avoid scroll traps)
const map = L.map("map", { scrollWheelZoom: false }).setView(
  [51.505, -0.09],
  13
);

// Choose a tile source that fits your traffic and terms.
// For light usage, OSM default tiles are fine; for production traffic, pick a reliable commercial tile provider.
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  detectRetina: true,
  crossOrigin: true,
  attribution: "© OpenStreetMap contributors",
  errorTileUrl:
    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",
}).addTo(map);

// Add an OSM marker with a popup
L.marker([51.5, -0.09]).addTo(map).bindPopup("Our office").openPopup();

Notes on OSM tile providers

• The community tile server is generous but not a CDN for heavy apps. Respect limits in the official policy: tile usage policy.
• For higher traffic or uptime guarantees, use a dependable provider (e.g., a commercial tiles CDN) and update the URL template accordingly.

Leaflet basics you’ll reach for

• Disable scroll zoom: set scrollWheelZoom: false (shown above).
• Multiple locations: create a feature group and fit bounds.
• Custom icons: L.icon with your own image and sizes.
• Layers and controls: tile layers, layer control, and scale control are built‑ins.

Performance and quality

• Be a good citizen. Follow OSM’s tile usage policy. Cache aggressively via your CDN if you proxy tiles; don’t hammer public servers.
• Lazy‑load when you can. Use iframe loading=“lazy”. For Leaflet, initialize the map when the section enters the viewport to defer JS work.
• Minimize requests. Keep zoom bounds reasonable, use detectRetina for sharpness on high‑DPI screens, and avoid unnecessary re‑renders.
• Fallbacks. In Leaflet, errorTileUrl prevents broken checkerboards. If a tile source fails, swap to a secondary provider in your code path.
• Balance quality and weight. Pick a tile style that’s readable at your sizes. Don’t ship massive custom icon sprites if a simple marker works.

Accessibility and attribution

• Clear labeling. Give iframes a meaningful title and aria-label. In Leaflet, wrap the map in a region with aria-labelledby pointing to a visible heading.
• Keyboard focus. Avoid putting the map first in the tab order. Provide a Skip map link before it so keyboard users can move on quickly.
• Touch and scroll. Disable scroll wheel zoom to prevent scroll traps. Consider a prominent zoom UI for mobile.
• Readable markers and popups. Use sufficient contrast and generous hit targets.
• Required credits. Keep © OpenStreetMap contributors visible. If you use a commercial tile service, include their attribution per terms. See OSM attribution.

Troubleshooting

• Mixed content (HTTP/HTTPS). If your site is HTTPS, your tiles and iframes must be HTTPS too. Update all URLs to https://.
• Tiles blocked or slow (429/403). You may be exceeding limits on the community server. Move to a suitable tile provider or serve via your own cache/CDN per policy.
• CORS or cross‑origin images. When drawing tiles on a canvas or mixing domains, enable crossOrigin in your tile layer and ensure the provider sends proper headers.
• Mobile gestures feel “sticky.” Disable scrollWheelZoom, add obvious zoom buttons, and use CSS to allow panning:

  .map {
    touch-action: pan-x pan-y;
  }
  

• Marker hidden under UI. Check z-index of fixed headers/overlays. Ensure the map container has position: relative and adequate stacking context.
• Iframe not resizing. Use aspect-ratio or set a fixed height on the container and width: 100% on the iframe.