window.addEventListener('load', function() {
    (g => {
        var h, a, k, p = "The Google Maps JavaScript API",
        c = "google",
        l = "importLibrary",
        q = "__ib__",
        m = document,
        b = window;
        b = b[c] || (b[c] = {});
        var d = b.maps || (b.maps = {}),
        r = new Set,
        e = new URLSearchParams,
        u = () => h || (h = new Promise(async (f, n) => {
            await (a = m.createElement("script"));
            e.set("libraries", [...r] + "");
            for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
            e.set("callback", c + ".maps." + q);
            a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
            d[q] = f;
            a.onerror = () => h = n(Error(p + " could not load."));
            a.nonce = m.querySelector("script[nonce]")?.nonce || "";
            m.head.append(a)
        }));
        d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))
    })({
        key: "AIzaSyCZeESr05gf2sHC1nJ7q0NfTffNT2fGCsc",
        v: "weekly",
    });
    
    
    
    function mapStyles(showbusinesses){
        return [
            {
                "featureType": "administrative",
                "elementType": "geometry.stroke",
                "stylers": [
                    {
                        "color": "#0096aa"
                    },
                    {
                        "weight": "0.30"
                    },
                    {
                        "saturation": "-75"
                    },
                    {
                        "lightness": "5"
                    },
                    {
                        "gamma": "1"
                    }
                ]
            },
            {
                "featureType": "administrative",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#0096aa"
                    },
                    {
                        "saturation": "-75"
                    },
                    {
                        "lightness": "5"
                    }
                ]
            },
            {
                "featureType": "administrative",
                "elementType": "labels.text.stroke",
                "stylers": [
                    {
                        "color": "#ffe146"
                    },
                    {
                        "weight": "6"
                    },
                    {
                        "saturation": "-28"
                    },
                    {
                        "lightness": "0"
                    }
                ]
            },
            {
                "featureType": "administrative",
                "elementType": "labels.icon",
                "stylers": [
                    {
                        "color": "#e6007e"
                    },
                    {
                        "weight": "1"
                    }
                ]
            },
            {
                "featureType": "landscape",
                "elementType": "all",
                "stylers": [
                    {
                        "color": "#ffe146"
                    },
                    {
                        "saturation": "-28"
                    },
                    {
                        "lightness": "0"
                    }
                ]
            },
            {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [
                    {
                        "visibility": showbusinesses
                    }
                ]
            },
            {
                "featureType": "poi.business",
                "elementType": "labels.icon",
                "stylers": [
                    {
                        "visibility": showbusinesses
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "all",
                "stylers": [
                    {
                        "color": "#fffeb9"
                    },
                    {
                        "visibility": "simplified"
                    },
                    {
                        "saturation": "-36"
                    },
                    {
                        "lightness": "6"
                    },
                    {
                        "gamma": "1"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels.text",
                "stylers": [
                    {
                        "visibility": "on"
                    },
                    {
                        "color": "#005d7d"
                    },
                    {
                        "weight": 8
                    },
                    {
                        "saturation": "-28"
                    },
                    {
                        "lightness": "0"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "visibility": "off"
                    },
                    {
                        "color": "#ffffff"
                    },
                    {
                        "weight": 8
                    },
                    {
                        "lightness": "5"
                    },
                    {
                        "gamma": "1"
                    },
                    {
                        "saturation": "-75"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels.icon",
                "stylers": [
                    {
                        "visibility": "simplified"
                    }
                ]
            },
            {
                "featureType": "road.local",
                "elementType": "geometry.stroke",
                "stylers": [
                    {
                        "visibility": "simplified"
                    },
                    {
                        "color": "#ffffff"
                    }
                ]
            },
            {
                "featureType": "transit",
                "elementType": "all",
                "stylers": [
                    {
                        "visibility": "simplified"
                    },
                    {
                        "color": "#0096aa"
                    },
                    {
                        "saturation": "-75"
                    },
                    {
                        "lightness": "5"
                    },
                    {
                        "gamma": "1"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "geometry.fill",
                "stylers": [
                    {
                        "visibility": "on"
                    },
                    {
                        "color": "#0096aa"
                    },
                    {
                        "saturation": "-75"
                    },
                    {
                        "lightness": "5"
                    },
                    {
                        "gamma": "1"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "labels.text",
                "stylers": [
                    {
                        "visibility": "simplified"
                    },
                    {
                        "color": "#ffe146"
                    },
                    {
                        "saturation": "-28"
                    },
                    {
                        "lightness": "0"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "labels.icon",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            }
        ]
    }

    const observer = new MutationObserver((mutationList, observer) => {
        mutationList.forEach(mutation => {
            if(mutation.type === "attributes" && mutation.target.className === 'contact-map'){
                if(
                    mutation.attributeName === 'data-lat' ||
                    mutation.attributeName === 'data-lng' ||
                    mutation.attributeName === 'data-pointlabel' ||
                    mutation.attributeName === 'data-zoom' ||
                    mutation.attributeName === 'data-showbusinesses' ||
                    mutation.attributeName === 'data-minheight'
                ){
                    window.createMap(mutation.target)
                }
            }
        })
    })

    window.createMap = async function(mapElement){
        const {Map} = await google.maps.importLibrary("maps")
        const lat = parseFloat(mapElement.getAttribute('data-lat'))
        const lng = parseFloat(mapElement.getAttribute('data-lng'))
        const pointlabel = mapElement.getAttribute('data-pointlabel')
        const zoom = parseInt(mapElement.getAttribute('data-zoom'))
        const showbusinesses = mapElement.getAttribute('data-showbusinesses')
        const minheight = mapElement.getAttribute('data-minheight')
        
        const latLng = {lat, lng}
        
        const map = new Map(mapElement, {
            center: latLng,
            zoom,
            styles: mapStyles(showbusinesses)
        })

        const marker = new google.maps.Marker({ position: latLng, map, title: pointlabel })

        mapElement.style.minHeight = minheight + 'px'

        const config = { attributes: true, childList: true, subtree: true }
        observer.observe(mapElement, config)
    }
    
    async function initMap() {
        const mapElements = document.querySelectorAll('.contact-map')

        mapElements.forEach(async mapElement => {
            await window.createMap(mapElement)
        })
    }
    
    initMap();
})