OSM is a great alternative to Google Maps when you want cost control and open data. Start with the iframe; move to Leaflet for richer interaction.
Add OSM embeds instantly (no plugin)
Drop the OSM iframe or a Leaflet snippet into MicroEdits, preview changes across pages, and publish—no theme edits required.
See also the quick Google path for comparison: Embed a Google Map on Your Website.
Method 1 — OSM iframe
Find your place on OpenStreetMap, use Share to copy the iframe. Wrap it with aspect‑ratio CSS and include attribution.
Method 2 — Leaflet for interactive maps
Include Leaflet CSS/JS, choose a reliable tile source, and add markers:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<div id="map" style="height:400px"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
const map=L.map('map').setView([51.505,-0.09],13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© OpenStreetMap contributors'}).addTo(map);
L.marker([51.5,-0.09]).addTo(map).bindPopup('Hello OSM');
</script>Responsive wrapper (CSS)
.responsive-map{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.responsive-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}Performance and quality
- Respect tile server usage policies; consider a commercial tile CDN for uptime.
- Cache where possible; avoid unnecessary re‑renders.
- Provide graceful fallbacks if tiles fail.
Accessibility and attribution
Ensure keyboard focus, label controls, and keep OSM attribution visible.
Troubleshooting
- Mixed content/CORS: ensure HTTPS and allow listed hosts.
- Blocked tiles: switch to an alternate tile provider.
- Mobile gestures: enable/disable touch zoom thoughtfully.
Frequently Asked Questions
Which tile providers are reliable?
OpenStreetMap default tiles are fine for light use. For production, consider providers like MapTiler or Stadia Maps with SLA and usage limits.
Do I need attribution with Leaflet?
Yes. Keep the attribution control visible and include the tile provider’s required credit text.