Google Map: Test

<div x-data="googleMap()" x-init="initMap()" 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() {
        return {
            mapId: "DEMO_MAP_ID",
            loading: true,
            map: null,
            markers: [],
            markerCluster: null,
            async initMap() {
                const {
                    Map
                } = await google.maps.importLibrary("maps");
                const [{
                    AdvancedMarkerElement
                }] = await Promise.all([
                    google.maps.importLibrary("marker")
                ]);
                this.Map = Map;
                this.AdvancedMarkerElement = AdvancedMarkerElement;
                await this.createMap();
                try {
                    const locations = await this.fetchLocations();
                    if (locations) {
                        await this.createMarkers(locations);
                        this.createMarkerCluster();
                    }
                } catch (error) {
                    console.error('Error initializing map:', error);
                } finally {
                    this.loading = false;
                }
            },
            createMap() {
                const mapConfig = {
                    center: {
                        lat: 46.603354,
                        lng: 1.888334
                    },
                    zoom: 4,
                    mapId: this.mapId
                };
                this.map = new this.Map(document.getElementById(this.mapId), mapConfig);
                console.log(this.map)
            },
            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('Error fetching locations:', error);
                    return null;
                }
            },
            createMarkers(locations) {
                this.markers = Object.values(locations).map(store => {
                    const position = {
                        lat: parseFloat(store[0].lat),
                        lng: parseFloat(store[0].lng)
                    };
                    return new this.AdvancedMarkerElement({
                        position,
                        title: "Marker"
                    });
                });
            },
            createMarkerCluster() {
                console.log(this.markers)
                this.markerCluster = new markerClusterer.MarkerClusterer({
                    markers: this.markers,
                    map: this.map
                });
                console.log(this.markerCluster)
                console.log(this.map)
            }
        };
    }
</script>