ContactSection add, zmiany w MapGoogle

src/components/maps/MapGoogle.astro

@@ -0,0 +1,79 @@
+---
+const {
+    apiKey,
+    lat,
+    lon,
+    zoom = 15,
+    title = "",
+    description = "",
+} = Astro.props;
+import "../../styles/map-google.css";
+---
+
+<div class="fuz-map-wrapper">
+    <div
+        id="fuz-map-google"
+        class="fuz-map-google"
+        data-lat={lat}
+        data-lon={lon}
+        data-title={title}
+        data-description={description}
+    >
+    </div>
+</div>
+<!-- TODO: Popracować nad wygladem markera -->
+<script is:inline>
+    window.initFuzGoogleMap = function () {
+        const el = document.getElementById("fuz-map-google");
+        if (!el) return;
+
+        const lat = Number(el.dataset.lat);
+        const lon = Number(el.dataset.lon);
+        const title = el.dataset.title || "";
+        const desc = el.dataset.description || "";
+
+        const map = new google.maps.Map(el, {
+            zoom: Number(`{{zoom}}`) || 15,
+            center: { lat, lng: lon },
+            mapTypeControl: false,
+            scrollwheel: false,
+            zoomControl: true,
+            streetViewControl: false,
+        });
+
+        const infowindow = new google.maps.InfoWindow({
+            content: `<div class="fuz-map-infowindow"><b>${title}</b><br/>${desc}</div>`,
+        });
+
+        const marker = new google.maps.Marker({
+            position: { lat, lng: lon },
+            map,
+            title,
+        });
+
+        marker.addListener("click", () => {
+            infowindow.open({
+                map,
+                anchor: marker,
+                shouldFocus: false,
+            });
+        });
+
+        // auto-open popup on load
+        setTimeout(() => {
+            infowindow.open({
+                map,
+                anchor: marker,
+                shouldFocus: false,
+            });
+        }, 100);
+
+        // Light fade-in
+        el.classList.add("loaded");
+    };
+</script>
+
+<script
+    async
+    src={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initFuzGoogleMap`}
+></script>