MapGoogle, poprawki w stopce i kontaktach

src/components/layout/Footer.astro

@@ -9,7 +9,7 @@ const footer = yaml.load(
 ---
 
 <footer
-  class="fuz-footer bg-[var(--fuz-bg)] text-[var(--fuz-text)] mt-20 border-t border-gray-200 dark:border-slate-700"
+  class="fuz-footer bg-[var(--fuz-bg)] text-[var(--fuz-text)] mt-0 border-t border-gray-200 dark:border-slate-700"
 >
   <!-- GŁÓWNY GRID -->
   <div class="footer-inner max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12">
@@ -23,9 +23,8 @@ const footer = yaml.load(
     </div>
 
     <!-- Kolumna 2 – Kontakt -->
-    <div class="space-y-1">
+    <div class="footer-col space-y-1">
       <h4 class="fuz-footer-title">Kontakt</h4>
-
       {
         footer.contact.phones.map((phone: string) => (
           <p class="fuz-footer-text">
@@ -44,7 +43,7 @@ const footer = yaml.load(
     </div>
 
     <!-- Kolumna 3 – Usługi -->
-    <div>
+    <div class="footer-col">
       <h4 class="fuz-footer-title">Usługi</h4>
       <ul class="space-y-1">
         {

src/components/maps/MapGoogle.astro

@@ -1,79 +1,113 @@
 ---
+import "../../styles/map-google.css";
 const {
     apiKey,
     lat,
     lon,
-    zoom = 15,
+    zoom = 12,
     title = "",
     description = "",
+    showMarker = false,
+    mode = "full", // "full" – mapa na całą sekcję, wszystko inne => karta
 } = Astro.props;
-import "../../styles/map-google.css";
+
+const mapId = `fuz-map-${Math.random().toString(36).slice(2)}`;
 ---
 
-<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
+    id={mapId}
+    class={mode === "full"
+        ? "fuz-map--full"
+        : mode === "contact"
+          ? "fuz-map--contact"
+          : "fuz-map--card"}
+    data-lat={lat}
+    data-lon={lon}
+    data-zoom={zoom}
+    data-title={title}
+    data-desc={description}
+    data-showmarker={showMarker}
+>
 </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 || "";
+<script is:inline define:vars={{ apiKey, mapId }}>
+    (function () {
+        // Funkcja inicjująca JEDNĄ konkretną mapę
+        function initSingleMap() {
+            const el = document.getElementById(mapId);
+            if (!el || !window.google || !google.maps) return;
 
-        const map = new google.maps.Map(el, {
-            zoom: Number(`{{zoom}}`) || 15,
-            center: { lat, lng: lon },
-            mapTypeControl: false,
-            scrollwheel: false,
-            zoomControl: true,
-            streetViewControl: false,
-        });
+            const lat = Number(el.dataset.lat);
+            const lon = Number(el.dataset.lon);
+            const zoom = Number(el.dataset.zoom);
+            const title = el.dataset.title || "";
+            const desc = el.dataset.desc || "";
+            const showMarker = el.dataset.showmarker === "true";
 
-        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,
+            const map = new google.maps.Map(el, {
+                zoom,
+                center: { lat, lng: lon },
+                mapTypeControl: false,
+                fullscreenControl: false,
+                streetViewControl: false,
+                scrollwheel: false,
+                zoomControl: true,
             });
-        });
 
-        // auto-open popup on load
-        setTimeout(() => {
-            infowindow.open({
-                map,
-                anchor: marker,
-                shouldFocus: false,
-            });
-        }, 100);
+            // Zapamiętujemy mapę globalnie (np. dla KML / markerów z zewnątrz)
+            if (!window.fuzMaps) window.fuzMaps = {};
+            window.fuzMaps[mapId] = map;
 
-        // Light fade-in
-        el.classList.add("loaded");
-    };
+            if (showMarker) {
+                const marker = new google.maps.Marker({
+                    position: { lat, lng: lon },
+                    map,
+                });
+
+                if (title) {
+                    const info = new google.maps.InfoWindow({
+                        content: `
+              <div class="fuz-map-infowindow">
+                <strong>${title}</strong><br/>
+                ${desc}
+              </div>
+            `,
+                    });
+                    info.open(map, marker);
+                }
+            }
+        }
+
+        // 1) Jeśli Google Maps JUŻ załadowane → inicjuj od razu
+        if (window.google && window.google.maps) {
+            initSingleMap();
+            return;
+        }
+
+        // 2) Jeżeli jeszcze NIE ma Google Maps → przygotuj kolejkę
+        if (!window.FUZ_GOOGLE_MAPS_LOADER) {
+            window.FUZ_GOOGLE_MAPS_LOADER = true;
+            window.FUZ_GOOGLE_MAPS_QUEUE = [];
+
+            window.FUZ_initGoogleMaps = function () {
+                // Wołana przez &callback=FUZ_initGoogleMaps
+                (window.FUZ_GOOGLE_MAPS_QUEUE || []).forEach((fn) => {
+                    try {
+                        fn();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                });
+                window.FUZ_GOOGLE_MAPS_QUEUE = [];
+            };
+
+            const s = document.createElement("script");
+            s.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=FUZ_initGoogleMaps`;
+            s.async = true;
+            document.head.appendChild(s);
+        }
+
+        // 3) Dodaj tę mapę do kolejki, żeby odpaliła się po załadowaniu SDK
+        window.FUZ_GOOGLE_MAPS_QUEUE.push(initSingleMap);
+    })();
 </script>
-
-<script
-    async
-    src={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initFuzGoogleMap`}
-></script>

src/components/maps/MapSwitch.astro

@@ -0,0 +1,15 @@
+---
+const { id, label } = Astro.props;
+---
+
+<label class="flex items-center gap-2 cursor-pointer select-none text-sm">
+  <input
+    id={id}
+    type="checkbox"
+    class="h-4 w-4 rounded border-gray-400"
+    onchange={id === "fiber-toggle"
+      ? "fiberRangeShow()"
+      : "radioRangeShow()"}
+  />
+  <span>{label}</span>
+</label>

src/components/sections/SectionContact.astro

@@ -9,6 +9,7 @@ const data = yaml.load(
 );
 const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
 ---
+
 <!-- TODO: Obrobić wysyłanie maila przez api -->
 <section id="contact" class="fuz-section">
     <!-- GRID 2 kolumny -->
@@ -95,15 +96,18 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
         </div>
     </div>
 
-    <!-- GOOGLE MAPS -->
-    <MapGoogle
+    <div class="fuz-contact-map-wrapper">
+      <MapGoogle
         apiKey={apiKey}
         lat={data.lat}
         lon={data.lng}
         zoom={16}
         title={data.markerTitle}
         description={data.markerAddress}
-    />
+        showMarker={true}
+        mode="contact"
+      />
+    </div>
 
     <div id="toast" class="fuz-toast hidden"></div>
 </section>