<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  margin: 0;
  padding: 20px;
  background: #f8fafc;
}

.map-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  border: 4px solid white;
}

#map {
  height: 400px;
  width: 100%;
  z-index: 1;
}

const map = L.map("map").setView([51.505, -0.09], 13);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
}).addTo(map);

L.marker([51.505, -0.09]).addTo(map)
  .bindPopup("<b>Hello!</b><br>We are located here.")
  .openPopup();

Back to Snippets

Simple Responsive OpenStreetMap

Embed a fully responsive OpenStreetMap on your website using Leaflet.js. This lightweight snippet includes the necessary CDN links and CSS to get a map running instantly, which is perfect for contact pages or location finders.

347

#javascript

#css

#openstreetmap

#map

#leaflet

#responsive

#location

#embed

/HTML *CSS ()JS Output Live Updates

Simple Responsive OpenStreetMap

Share Code Snippet