Embedding Interactive Maps with Leaflet

The map: true flag loads Leaflet plus the OpenStreetMap tile layer. Place a <div> container and initialise a map inside a <script> block.

Single Marker

The Bern Patent Office — where Einstein developed special relativity:

World-Famous Physics Laboratories

Five iconic research facilities around the world — click each marker for details:

Custom Icon — Pulsing Marker

A CSS-animated pulsing circle using L.divIcon:

Polygon Overlay

Outline the approximate location of the Antarctic Treaty Area:

Usage

---
title: My Post With Maps
map: true
---

Create a <div id="myMap" style="height:300px;"> container and initialise Leaflet using the self-polling pattern to wait for the library to load:

(function poll() {
  if (typeof L === 'undefined') { setTimeout(poll, 50); return; }
  const map = L.map('myMap').setView([lat, lng], zoom);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
  }).addTo(map);
})();

OpenStreetMap tiles are free and open. Add markers with L.marker(latlng).addTo(map) and pop-ups with .bindPopup('...').