For a static HTML page, the script-tag path is the fastest: include maplibre-gl from a CDN, call new maplibregl.Map({...}) after DOMContentLoaded. No bundler.
<!-- index.html -->
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script><script>
const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';
document.addEventListener('DOMContentLoaded', () => {
const map = new maplibregl.Map({
container: 'map-canvas',
style: MAP_STYLE,
center: [77.209, 28.6139],
zoom: 11,
hash: true,
});
map.addControl(new maplibregl.NavigationControl());
new maplibregl.Marker()
.setLngLat([77.209, 28.6139])
.setPopup(new maplibregl.Popup().setText('New Delhi'))
.addTo(map);
});
</script>
<style>
#map-canvas { width: 100%; height: 480px; }
</style>
<div id="map-canvas"></div>
Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.
Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.