Embed OpenStreetMap on Your Website Without Google Maps
You Probably Do Not Need Google Maps
Most websites use a map for one thing: showing where something is. A store, an office, a venue, a project site. For that job the default choice, a Google Maps embed, brings baggage: API keys and billing accounts for anything beyond the basic iframe, consent banners because of tracking, and a look that never quite matches your design.
OpenStreetMap based embeds solve the same problem with none of that. In this guide we walk through three ways to put an OSM map on your site, from a one-line iframe to a fully custom MapLibre GL integration, all free and tracking-free.
30-SECOND SUMMARY
Three ways to embed OpenStreetMap without Google: (1) a plain iframe pointing at a hosted map page, one line of HTML, works everywhere; (2) MapLibre GL with a hosted style URL, a dozen lines of JavaScript, full control over markers and interaction; (3) osm.org's own share iframe for quick, unstyled needs. OSM embeds need no API key, send no visitor data to an ad company, and can be styled to match your brand. The only hard rule: keep the OpenStreetMap attribution visible.
Why Move Away from the Default
Cost and keys
Google's JavaScript API meters every map load against a billing account. An OSM embed on open infrastructure has no key, no quota and no surprise invoice.
Privacy
A Google embed sets cookies and phones home, which drags your cookie banner into scope. A self-hosted OSM embed can serve a map with zero third-party requests and zero tracking.
Design
Your map can use your palette. With vector styles the map becomes part of your visual identity instead of a foreign rectangle on the page.
Option 1: The One-Line Iframe
The simplest integration is an iframe pointing at a hosted embed page. This is exactly what our free map gallery provides: pick a style, pan the live preview to frame your location, and copy the generated code.
<iframe
src="https://www.hititmedya.com/embed/map/hitit-light?lng=32.85&lat=39.93&zoom=11"
width="100%" height="400"
style="border:0; border-radius:8px;"
loading="lazy"
title="Map"></iframe>What you get: a fast vector map in the style you chose, interactive pan and zoom, correct attribution, and not a single tracking cookie. The lng, lat and zoom parameters set the initial view, so the same embed URL works for any location on the planet.
OpenStreetMap.org also offers a basic share iframe (Share panel on osm.org). It is fine for quick internal pages, but you cannot style it and you should not lean on the volunteer-run osm.org servers for high-traffic commercial sites.
Option 2: MapLibre GL with a Style URL
When you need markers, popups or custom interaction, embed the map natively with MapLibre GL JS, the open source map renderer. With a hosted style URL the whole integration is a dozen lines:
<div id="map" style="width:100%;height:400px"></div>
<link href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
<script>
const map = new maplibregl.Map({
container: "map",
style: "https://tiles.hititmedya.com/v1/styles/hitit-light.json",
center: [32.85, 39.93],
zoom: 11
});
map.addControl(new maplibregl.NavigationControl());
new maplibregl.Marker({ color: "#10b981" })
.setLngLat([32.85, 39.93])
.setPopup(new maplibregl.Popup().setText("Our office"))
.addTo(map);
</script>The style URL carries everything: tile source, fonts, icons and colors. Swap hitit-light for hitit-dark or any other style and the map reskins itself with no other change. All of our published style URLs are listed on each style's page in the gallery.
Option 3: Static Map Images
If the location never changes and interactivity adds nothing, consider a static image with a link to a map service for directions. It is the fastest option (zero JavaScript) and works in emails too. The trade-off is obvious: no zoom, no pan, and you need to regenerate the image when the design changes. For most contact pages a lightweight interactive embed is the better balance.
The One Rule: Attribution
OpenStreetMap data is built by volunteers and licensed under ODbL. The license requires visible credit, typically the text OpenStreetMap linked to osm.org/copyright, wherever the map appears. Every embed method above shows it automatically in the map corner. Do not hide or remove it; it is both a legal requirement and fair credit to the people who mapped your street.
Which Option Should You Pick?
- Contact page, store locator teaser, blog post: the iframe. One line, done.
- Product features, multiple markers, custom interactions: MapLibre GL with a style URL.
- Emails and ultra-light landing pages: a static image linking out to a live map.
Generate your embed code in the gallery
Pick one of 12 branded map styles, frame your location on the live preview and copy the iframe or the MapLibre snippet.
All tools are free, no API key required.
Frequently Asked Questions
01Is OpenStreetMap really free for commercial use?
Yes. OSM data is licensed under ODbL, which allows commercial use as long as you attribute OpenStreetMap and share improvements to the data itself. Styling and embedding the map on a commercial site is fully permitted.
02Does an OSM embed need a cookie banner?
A self-hosted OSM embed like the ones in our gallery sets no cookies and sends no visitor data to third parties, so the map itself does not create a consent requirement. Always review your full page, other scripts may still need consent.
03How accurate is OpenStreetMap compared to Google Maps?
In cities and most populated areas OSM is comparable and sometimes richer, especially for footpaths, cycling routes and building outlines. Coverage can lag in remote regions. For showing locations, routes and areas on a website it is more than accurate enough.
04Can I show driving directions on an OSM embed?
Turn-by-turn routing needs a routing engine, which is a separate service from the basemap. The common pattern is to link your marker popup to a directions service the visitor already uses. For most business sites that hybrid is the sweet spot.
Sources and References
The official attribution and licensing requirements for OSM data.
The open source vector map renderer used for native embeds.
Community guides for moving from commercial map providers to OpenStreetMap.