diff --git a/website/assets/map_howto.js b/website/assets/map_howto.js
index 904dec6..7fd0102 100644
--- a/website/assets/map_howto.js
+++ b/website/assets/map_howto.js
@@ -1,11 +1,13 @@
-function initMap(div) {
+function initMap() {
+  if (window.map) return
+
   const map = new maplibregl.Map({
     style: 'https://tiles.openfreemap.org/styles/liberty',
     center: [-0.114, 51.506],
     zoom: 14.2,
     bearing: 55.2,
     pitch: 60,
-    container: div,
+    container: mapDiv,
     // boxZoom: false,
     // doubleClickZoom: false,
     // scrollZoom: false,
@@ -21,12 +23,14 @@ function initMap(div) {
   new maplibregl.Marker().setLngLat([-0.119, 51.507]).addTo(map)
 }
 
-const mapDiv = document.getElementById('map')
+const mapDiv = document.getElementById('map-container')
 mapDiv.onclick = function () {
-  initMap(mapDiv)
+  initMap()
 }
 
 function selectStyle(style) {
+  initMap()
+
   const styleUrl = 'https://tiles.openfreemap.org/styles/' + style
   map.setStyle(styleUrl)
   map.setPitch(0)
diff --git a/website/assets/style.css b/website/assets/style.css
index 47d3e7c..d3cf97f 100644
--- a/website/assets/style.css
+++ b/website/assets/style.css
@@ -156,13 +156,13 @@ code {
   white-space: nowrap;
 }
 
-#map {
+#map-container {
   width: 100%;
   height: 500px;
   margin-bottom: 2em;
 }
 
-#map:not(.maplibregl-map) {
+#map-container:not(.maplibregl-map) {
   background-image: url('mapbg.jpg');
   background-size: cover;
   background-position: center;
diff --git a/website/blocks/map_howto.html b/website/blocks/map_howto.html
index d00ae87..e19582f 100644
--- a/website/blocks/map_howto.html
+++ b/website/blocks/map_howto.html
@@ -1,4 +1,4 @@
-<div id="map"></div>
+<div id="map-container"></div>
 
 <p>Choose a style:</p>
 <div class="button-container">