wip

functions.php

@@ -151,6 +151,10 @@ function hb_administrative_units_map(string $administrationUnitsInJson, bool $ha
 			id="map"
 			data-organizationalUnits='<?php echo $administrationUnitsInJson ?>'
 	></div>
+	<div class="administrativeUnitsMap__map"
+			id="map-v2"
+			data-administrativeUnits='<?php echo $administrationUnitsInJson ?>'
+	></div>
 <?php endif; ?>
 </div>
 <?php

header.php

@@ -25,6 +25,13 @@
 	<!-- End Google Tag Manager -->
 	<?php endif; ?>
 
+	<script>
+		(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+			key: "AIzaSyDsxejbWcsI1eb4eoQJq47Eq9qxvSCMXSc",
+			v: "weekly",
+		});
+	</script>
+
 	<!-- Google Custom Search -->
 	<script async src="https://cse.google.com/cse.js?cx=4766a09e4b0ac4a34"></script>
 </head>

scripts/administrativeUnitsMap.js

@@ -0,0 +1,43 @@
+/**
+ * administrative unit schema:
+{
+	name: string;
+	description: string|null,
+	image: string|null,
+	lat: number;
+	lng: number;
+	address: string;
+	chairman: string|null;
+	website: string|null;
+	email: string|null;
+	isOfTypeClub: boolean;
+	isOfTypeBase: boolean;
+	isOfTypeRegional: boolean;
+	isOfTypeOffice: boolean;
+	isOfTypeChildren: boolean;
+}
+*/
+
+async function hb_initialize_map() {
+    const { Map } = await google.maps.importLibrary("maps");
+    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+
+    const mapEl = document.getElementById("map-v2");
+    const administrativeUnits = JSON.parse(mapEl.getAttribute('data-administrativeUnits'));
+
+    const map = new Map(mapEl, {
+        center: { lat: 49.000, lng: 16.000 },
+        zoom: 8,
+    });
+
+    // todo bulk add?
+    for (const unit of administrativeUnits) {
+        const marker = new AdvancedMarkerElement({
+            map: map,
+            position: { lat: unit.lat, lng: unit.lng },
+            title: unit.name,
+        });
+    }
+}
+
+hb_initialize_map();