feat(UI): actualización de colores de ruta a amarillo y fix navegación transporte

frontend/src/composables/useMapState.ts

@@ -0,0 +1,116 @@
+import { ref } from 'vue'
+
+// Registro global de todo lo que está en el mapa
+const markers = ref<google.maps.Marker[]>([])
+const renderers = ref<google.maps.DirectionsRenderer[]>([])
+const polylines = ref<google.maps.Polyline[]>([])
+const infoWindows = ref<google.maps.InfoWindow[]>([])
+const circles = ref<google.maps.Circle[]>([])
+
+// Singleton pattern using composable
+export const useMapState = () => {
+
+    const registrarMarker = (marker: any) => {
+        if (marker) markers.value.push(marker as google.maps.Marker)
+        return marker
+    }
+
+    // Registrar un renderer
+    const registrarRenderer = (renderer: google.maps.DirectionsRenderer) => {
+        if (renderer) renderers.value.push(renderer)
+        return renderer
+    }
+
+    // Registrar una polyline
+    const registrarPolyline = (polyline: google.maps.Polyline) => {
+        if (polyline) polylines.value.push(polyline)
+        return polyline
+    }
+
+    // Registrar un circle
+    const registrarCircle = (circle: google.maps.Circle) => {
+        if (circle) circles.value.push(circle)
+        return circle
+    }
+
+    // Registrar un InfoWindow
+    const registrarInfoWindow = (infoWindow: google.maps.InfoWindow) => {
+        if (infoWindow) infoWindows.value.push(infoWindow)
+        return infoWindow
+    }
+
+    // ⚠️ FUNCIÓN CRÍTICA: limpiar ABSOLUTAMENTE TODO del mapa
+    const limpiarMapa = () => {
+        // Eliminar markers
+        markers.value.forEach(m => {
+            try {
+                if (m && typeof m.setMap === 'function') m.setMap(null)
+                if (m && typeof (m as any).remove === 'function') (m as any).remove() // para HTML markers custom
+                if (m && google?.maps?.event?.clearInstanceListeners) {
+                    google.maps.event.clearInstanceListeners(m)
+                }
+            } catch (e) {
+                console.warn('Error limpiando marker', e)
+            }
+        })
+        markers.value = []
+
+        // Eliminar renderers de Directions
+        renderers.value.forEach(r => {
+            try {
+                if (r && typeof r.setMap === 'function') r.setMap(null)
+                if (r && typeof r.setDirections === 'function') r.setDirections({ routes: [] } as any)
+            } catch (e) {
+                console.warn('Error limpiando renderer', e)
+            }
+        })
+        renderers.value = []
+
+        // Eliminar polylines
+        polylines.value.forEach(p => {
+            try {
+                if (p && typeof p.setMap === 'function') p.setMap(null)
+            } catch (e) {
+                console.warn('Error limpiando polyline', e)
+            }
+        })
+        polylines.value = []
+
+        // Cerrar y limpiar infoWindows
+        infoWindows.value.forEach(iw => {
+            try {
+                if (iw && typeof iw.close === 'function') iw.close()
+            } catch (e) {
+                console.warn('Error limpiando infowindow', e)
+            }
+        })
+        infoWindows.value = []
+
+        // Eliminar circles (pulso de ubicación) // Added custom HTML markers too since they often act as circles
+        circles.value.forEach(c => {
+            try {
+                if (c && typeof c.setMap === 'function') c.setMap(null)
+                if (c && typeof (c as any).remove === 'function') (c as any).remove()
+            } catch (e) {
+                console.warn('Error limpiando circle', e)
+            }
+        })
+        circles.value = []
+
+        console.log('SIBU | Mapa limpiado completamente ✓')
+    }
+
+    return {
+        markers,
+        renderers,
+        polylines,
+        infoWindows,
+        circles,
+        registrarMarker,
+        registrarRenderer,
+        registrarPolyline,
+        registrarCircle,
+        registrarInfoWindow,
+        limpiarMapa
+    }
+}