se filtra resultado de paraderos

src/components/GoogleMap.svelte

@@ -8,33 +8,47 @@
     export let marks = [];
 
     let mapEl = null;
-    let infoWindow;
+    let google = null;
+    let google_window = null;
+    let google_map = null;
+    let google_marks = []
+
+    $: cargarMarcadores(marks)
 
     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"
-            el.async = true;
-            el.onload = globalThis.initMap;
             document.body.appendChild(el)
         }
 
-        globalThis.initMap()
     })
 
-    globalThis.initMap = function () {
+    globalThis.initMap = function() {
-        const google = globalThis.google;
+        google = globalThis.google;
-        if (!google || !mapEl) return;
+        google_window = new google.maps.InfoWindow();
+        google_map = new google.maps.Map(mapEl, { zoom, center });
+        cargarMarcadores(marks)
+    }
    
-        const map = new google.maps.Map(mapEl, { zoom, center });
+    function cargarMarcadores(marks) {
-        infoWindow = new google.maps.InfoWindow();
+        if (!google_map) return;
 
+        dispatch('loading', true)
+        
+        for (const mark of google_marks) {
+            mark.setMap(null)
+        }
+
+        if (marks.length) google_map.setCenter(marks[0].position)
+
+        google_marks = []
         for (const mark of marks) {
             const { position, title, location, url_image, id_paradero } = mark;
-            const marker = new google.maps.Marker({ position, map, title });
+            const marker = new google.maps.Marker({ position, map: google_map, title });
 
             marker.addListener("click", () => {
-                infoWindow.close();
+                google_window.close();
                 const imagen = url_image ? `<img alt="Imagen" src="${url_image}" width="200">` : ''
                 const html = `
                     <h1>${title}</h1>
@@ -43,17 +57,22 @@
                     <hr>
                     ${imagen}
                 `
-                infoWindow.setContent(html);
+                google_window.setContent(html);
-                infoWindow.open(marker.getMap(), marker);
+                google_window.open(marker.getMap(), marker);
             });
+
+            google_marks.push(marker)
         }
-        google.maps.event.addListener(map, "zoom_changed", function () {
+
-            console.log({ zoom: map.zoom });
+        // google.maps.event.addListener(google_map, "zoom_changed", function () {
-        });
+        //     console.log({ zoom: google_map.zoom });
+        // });
+
+        dispatch('loading', false)
     };
 
     globalThis.onEdita = function(id_paradero) {
-        infoWindow.close();
+        google_window.close();
         dispatch('edita', id_paradero)
     }
 </script>

src/pages/mapas/Paraderos.svelte

@@ -5,37 +5,121 @@
     import GoogleMap from '$/components/GoogleMap.svelte'
     import IconLoading from "$/components/IconLoading.svelte";
     import ModalParadero from "./ModalParadero.svelte";
+    import { getRegiones } from "$/services/regiones";
+    import { getComunas } from "$/services/comunas";
 
     let data_map = null
     let paradero = null
+    let id_comuna = ''
+    let id_region = ''
+    let regiones = []
+    let comunas = []
+    let comunas_region = []
+    let search = ''
+    let search_time = null;
+    let search_paraderos = []
+    let loading = false
 
     $: init_google_map($storeParaderos)
+    $: onSearch(search)
+
+    cargar_regiones_comunas()
+
+    async function cargar_regiones_comunas() {
+        try {
+            regiones = await getRegiones()
+            comunas = await getComunas()
+        } catch (error) {
+            alert(error)
+        }
+    }
+
+    function onChangeRegion() {
+        comunas_region = comunas.filter(el => el.id_region === Number(id_region))
+        runSearch()
+    }
 
     async function init_google_map(data_inicial) {
         const paraderos = data_inicial || await getMarcasParaderos()
         storeParaderos.set(paraderos);
         data_map = paraderos;
+        runSearch()
     }
 
     function onEdita(id_paradero) {
         paradero = { id_paradero }
     }
+
+    function onSearch(search) {
+        if (!data_map) return;
+        search_time && clearTimeout(search_time)
+        search_time = setTimeout(runSearch, 1000)
+    }
+
+    function runSearch() {
+        search_paraderos = data_map.marks.filter(el => {
+            if (id_region && !id_comuna) {
+                const existe = comunas_region.findIndex(com => com.id_comuna === el.id_comuna) !== -1;
+                if (!existe) return false;
+            }
+            if (id_comuna && el.id_comuna !== Number(id_comuna)) return false;
+            return !search || el.location.toUpperCase().indexOf(search.toUpperCase()) !== -1;
+        })
+    }
 </script>
 
 <PageTitle>Paraderos</PageTitle>
 
 <div class="card">
     <div class="card-header">
+        <div class="row">
+            <div class="col-md-auto">
                 <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="col-md-auto">
+                <div class="input-group">
+                    <div class="input-group-text">Región</div>
+                    <select bind:value={id_region} class="form-select" on:change={onChangeRegion}>
+                        <option value=""></option>
+                        {#each regiones as region}
+                            <option value={region.id_region}>{region.nombre_region}</option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
+            <div class="col-md-auto">
+                <div class="input-group">
+                    <div class="input-group-text">Comuna</div>
+                    <select bind:value={id_comuna} class="form-select" on:change={runSearch}>
+                        <option value=""></option>
+                        {#each comunas_region as comuna}
+                            <option value={comuna.id_comuna}>{comuna.nombre_comuna}</option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
+            <div class="col-md-auto">
+                <div class="input-group">
+                    <input type="search" bind:value={search} placeholder="busqueda..." class="form-control">
+                    <div class="input-group-text"><i class="bi bi-search"></i></div>
+                </div>
+            </div>
+            <div class="col-md">
+                {#if loading}
+                    <span>Cargando ubicaciones...</span>
+                {/if}
+            </div>
+        </div>
+    </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}
+                marks={search_paraderos}
                 on:edita={ev => onEdita(ev.detail)}
+                on:loading={ev => loading = ev.detail}
             />
         {:else}
             <IconLoading />