<script>
    import { onMount, createEventDispatcher } from 'svelte'
    const dispatch = createEventDispatcher();

    export let google_api_key = ''
    let mapEl = null

    onMount(() => {
        if (!globalThis.google) {
            const el = document.createElement('script')
            el.src = "https://maps.googleapis.com/maps/api/js?key=" + google_api_key + "&callback=initMap&v=weekly"
            document.body.appendChild(el)
        } else {
            globalThis.initMap()
        }
    })

    globalThis.initMap = function() {
        const google = globalThis.google;
        const google_map = new google.maps.Map(mapEl);
        dispatch('start', google_map)
    }
</script>

<div bind:this={mapEl} style="height: 800px; max-height: 90vh;">Cargando...</div>