Google Map: Ok

<div x-data="googleMap()" x-init="init()" class="flex gap-4 h-[600px]">
    <div class="flex-1 relative">
        <div id="DEMO_MAP_ID" class="absolute inset-0"></div>
        <template x-if="loading">
            <div class="absolute inset-0 bg-white/80 flex items-center justify-center">
                <div class="loading-spinner"></div>
            </div>
        </template>
    </div>
</div>

<script>
    function googleMap() {
        let mapsLib = null;
        let markerLib = null;
        let geometryLib = null;
        let mapInstance = null;
        return {
            mapId: "DEMO_MAP_ID",
            loading: true,
            markers: [],
            markerCluster: null,
            async init() {
                try {
                    await this.loadLibraries();
                    await this.initMap();
                    await this.loadAndDisplayMarkers();
                } catch (error) {
                    console.error('Erreur lors de l\'initialisation:', error);
                } finally {
                    this.loading = false;
                }
            },
            async loadLibraries() {
                const [maps, marker, geometry] = await Promise.all([
                    google.maps.importLibrary("maps"),
                    google.maps.importLibrary("marker"),
                    google.maps.importLibrary("geometry"),
                ]);
                mapsLib = maps;
                markerLib = marker;
                geometryLib = geometry;
            },
            async initMap() {
                if (!mapsLib) throw new Error('Libraries not loaded');
                mapInstance = new mapsLib.Map(document.getElementById(this.mapId), {
                    center: {
                        lat: 46.603354,
                        lng: 1.888334
                    },
                    zoom: 14,
                    mapId: this.mapId
                });
            },
            async loadAndDisplayMarkers() {
                const locations = await this.fetchLocations();
                if (locations) {
                    await this.createMarkers(locations);
                    this.createMarkerCluster();
                }
            },
            async fetchLocations() {
                try {
                    const response = await fetch(`${window.location.origin}/js/json/getList.json`);
                    const data = await response.json();
                    return data.success ? data.data.items : null;
                } catch (error) {
                    console.error('Erreur lors du chargement des locations:', error);
                    return null;
                }
            },
            async createMarkers(locations) {
                if (!markerLib) throw new Error('Marker library not loaded');
                this.markers = Object.values(locations).map(store => {
                    const position = {
                        lat: parseFloat(store[0].lat),
                        lng: parseFloat(store[0].lng)
                    };
                    return new markerLib.AdvancedMarkerElement({
                        position,
                        title: "Marker"
                    });
                });
            },
            createMarkerCluster() {
                if (!mapInstance || !this.markers.length) return;
                this.markerCluster = new markerClusterer.MarkerClusterer({
                    markers: this.markers,
                    map: mapInstance,
                    algorithm: new markerClusterer.SuperClusterAlgorithm({
                        radius: 500,
                        maxZoom: 15,
                        minZoom: 3,
                    })
                });
            },
            // Méthodes additionnelles que vous pourriez ajouter
            getMap() {
                return mapInstance;
            },
            getMarkers() {
                return this.markers;
            },
            // Exemple de méthode pour mettre à jour la carte
            updateMapCenter(lat, lng) {
                if (mapInstance) {
                    mapInstance.setCenter({
                        lat,
                        lng
                    });
                }
            }
        };
    }
</script>