dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mapa asynchroniczność, kontrastowanie linków

Browse Source
This commit is contained in:
dm
2025-11-26 16:06:29 +01:00
parent a0f4e8fbab
commit 9b5eb5a3ef
3 changed files with 88 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/maps/MapGoogle.astro
View File

@@ -1,9 +1,6 @@
---
import "../../styles/map-google.css";
/**
* PARAMETRY MAPY
*/
const {
apiKey,
lat,
@@ -16,11 +13,9 @@ const {
mapStyleId = "8e0a97af9476f2d3"
} = Astro.props;
/** ID kontenera w DOM */
const domId = `fuz-map-${Math.random().toString(36).slice(2)}`;
---
<!-- Kontener na mapę -->
<div
id={domId}
class={
@@ -36,35 +31,34 @@ const domId = `fuz-map-${Math.random().toString(36).slice(2)}`;
data-title={title}
data-desc={description}
data-showmarker={showMarker}
/></div>
></div>
<script is:inline define:vars={{ apiKey, domId, mapStyleId }}>
/**
* ⭐ FINALNY GOOGLE MAPS API LOADER 2025 ⭐
* ------------------------------------------
* - Bez callbacków
* - Bez deprecated Marker
* - Zgodny z importLibrary()
* - Zero warningów o async / mapId
* - Stabilny w Astro (Vite SSR + SPA)
*/
(function () {
/** Ładowanie Google Maps API — stabilna wersja */
async function loadGoogleMaps(apiKey) {
// Jeśli już załadowane
if (window.google?.maps) return window.google.maps;
if (window.google?.maps?.importLibrary) return;
// Jeśli trwa ładowanie — użyj tego samego Promise
if (!window._GOOGLE_MAPS_LOADING) {
window._GOOGLE_MAPS_LOADING = new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly`;
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&loading=async&v=weekly`;
script.async = true;
script.defer = true;
script.onerror = () => reject("Google Maps API failed to load");
script.onload = () => resolve(window.google.maps);
// Czekamy na google.maps.importLibrary
script.onload = () => {
const checkReady = () => {
if (window.google?.maps?.importLibrary) {
resolve();
} else {
setTimeout(checkReady, 50);
}
};
checkReady();
};
document.head.appendChild(script);
});
}
@@ -72,69 +66,65 @@ const domId = `fuz-map-${Math.random().toString(36).slice(2)}`;
return window._GOOGLE_MAPS_LOADING;
}
/** ★ Inicjalizacja pojedynczej mapy */
async function initMap() {
const el = document.getElementById(domId);
if (!el) return;
/** 1. Ładujemy API */
const maps = await loadGoogleMaps(apiKey);
try {
await loadGoogleMaps(apiKey);
/** 2. importLibrary — NOWE Google API 2025 */
const { Map } = await maps.importLibrary("maps");
const { AdvancedMarkerElement } = await maps.importLibrary("marker");
const { InfoWindow } = await maps.importLibrary("maps");
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
/** 3. Dane konfiguracyjne mapy z data-* */
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 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";
/** 4. Tworzymy mapę z nowym mapId */
const map = new Map(el, {
center: { lat, lng: lon },
zoom,
mapId: mapStyleId, // ★★ wymagane 2024+ ★★
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
scrollwheel: false,
zoomControl: true,
});
/** Zapamiętanie referencji */
window.fuzMaps = window.fuzMaps || {};
window.fuzMaps[domId] = map;
/** 5. Marker 2025 (AdvancedMarkerElement) */
if (showMarker) {
const marker = new AdvancedMarkerElement({
map,
position: { lat, lng: lon }
const map = new Map(el, {
center: { lat, lng: lon },
zoom,
mapId: mapStyleId,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
scrollwheel: false,
zoomControl: true,
});
if (title || desc) {
const info = new InfoWindow({
content: `
<div class="f-info-window">
<div class="f-info-header">
<div class="f-info-city">${title}</div>
<div class="f-info-street">${desc}</div>
</div>
</div>
`
window.fuzMaps = window.fuzMaps || {};
window.fuzMaps[domId] = map;
if (showMarker) {
const marker = new AdvancedMarkerElement({
map,
position: { lat, lng: lon }
});
info.open({ map, anchor: marker });
if (title || desc) {
const { InfoWindow } = await google.maps.importLibrary("maps");
const info = new InfoWindow({
content: `
<div class="f-info-window">
<div class="f-info-header">
<div class="f-info-city">${title}</div>
<div class="f-info-street">${desc}</div>
</div>
</div>
`
});
info.open({ map, anchor: marker });
}
}
} catch (error) {
console.error("Error initializing map:", error);
}
}
/** Start po załadowaniu DOM */
document.addEventListener("DOMContentLoaded", initMap);
})();
</script>
</script>