Sistema_Gestion_Transporte/src/pages/mapas/Paraderos.svelte

<script>
    import PageTitle from "$/components/PageTitle.svelte";
    import { getMarcasParaderos } from "$/services/mapas";
    import { storeParaderos } from "$/stores/global";
    import GoogleMap from '$/components/GoogleMap.svelte'
    import IconLoading from "$/components/IconLoading.svelte";

    let my_map = null;
    let data_map = null

    $: init_google_map($storeParaderos)
    $: console.log({ data_map })

    async function init_google_map(data_inicial) {
        const paraderos = data_inicial || await getMarcasParaderos()
        storeParaderos.set(paraderos);
        data_map = paraderos;
    }


</script>

<PageTitle>Paraderos</PageTitle>

<div class="card">
    <div class="card-header">
        <button class="btn btn-outline-secondary" on:click|preventDefault={() => init_google_map(null)}><i class="bi bi-arrow-repeat"></i> Refrescar</button>
    </div>
    <div class="card-body">
        {#if data_map}
            <GoogleMap
                google_api_key={data_map.google_api_key}
                center={data_map.center}
                zoom={data_map.zoom}
                marks={data_map.marks}
            />
        {:else}
            <IconLoading />
        {/if}
    </div>
</div>