perf: optimization for maps & network

frontend/src/views/MapView.vue

@@ -10,6 +10,7 @@ import { useGoogleMaps } from "@/composables/useGoogleMaps";
 import { analyticsService } from "@/services/analyticsService";
 import { getImageUrl } from "@/utils/imageUrl";
 
+import { useDirectionsRoute } from "@/composables/useDirectionsRoute";
 import BusStopInfoModal from "@/components/BusStopInfoModal.vue";
 import type { BusStop } from '@/types'
 
@@ -22,6 +23,8 @@ const busStopStore = useBusStopStore();
 const couponStore = useCouponStore();
 
 const { map, isLoaded, error: mapsError, initMap, addNumberedMarker, addHtmlMarker, fitBounds, setCenter, setZoom, addMarker, clearAllOverlays } = useGoogleMaps();
+const { trazarRuta, limpiarRuta, estasCargando: estasCargandoRuta, errorRuta } = useDirectionsRoute();
+
 const markers = ref<any[]>([]);
 const promoMarkers = ref<any[]>([]);
 const userMarker = ref<any>(null);
@@ -141,6 +144,7 @@ async function clearAllMapData() {
        try { if (optimalStopPulse.value.setMap) optimalStopPulse.value.setMap(null); } catch(e){}
        optimalStopPulse.value = null;
     }
+    limpiarRuta();
 
     // 7. Restaurar Solo Usuario tras un breve respiro
     await nextTick();
@@ -442,6 +446,9 @@ function clearMapMarkers() {
     }
     optimalStopPulse.value = null;
   }
+  
+  // Clear directions route
+  limpiarRuta();
 }
 
 async function updateMapMarkers() {
@@ -571,11 +578,27 @@ function updateMarkersStyles(force = false) {
       marker.setLabel(null);
     }
   });
+  
+  // Dibujar la ruta usando Directions API cuando se actualicen los marcadores
+  if (routeStore.selectedRouteId && map.value) {
+    const stopsForDirections = markers.value.map((m, i) => {
+         const pos = m.getPosition();
+         return {
+             id: i, // ID temporal para trazar logic
+             nombre: `Stop ${i+1}`,
+             latitud: pos.lat(),
+             longitud: pos.lng(),
+             orden: i
+         };
+    });
+    trazarRuta(stopsForDirections, map.value);
+  }
 }
 
 // La función drawRouteOnRoad ha sido eliminada por petición del usuario (línea azul removida)
 
 
+
 async function updatePromoMarkers() {
   if (!isLoaded.value) return;
 
@@ -874,7 +897,18 @@ function clearNavigation() {
     <!-- Main Map Container -->
     <div class="map-side">
       <div class="map-view">
-        <div class="map-container">
+        <!-- Status overlay para SIBU Directions API -->
+      <div v-if="estasCargandoRuta || errorRuta" class="status-indicator">
+        <div v-if="estasCargandoRuta" class="loading-pill">
+            Calculando ruta real...
+        </div>
+        <div v-if="errorRuta" class="error-pill">
+            {{ errorRuta }}
+        </div>
+      </div>
+
+      <div class="map-container">
+        <!-- Floating Offers Button at exact location -->
           <div v-if="mapsError" class="error">
             <div style="text-align: center; padding: 20px; max-width: 600px; margin: 0 auto;">
               <h3 style="color: var(--text-primary); margin-bottom: 15px;">⚠️ Error al cargar mapa</h3>
@@ -1196,6 +1230,50 @@ function clearNavigation() {
   position: relative;
 }
 
+/* SIBU Directions API status tags */
+.status-indicator {
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.loading-pill {
+  background-color: #1e40af; /* Tailwind blue-800 */
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 2px solid white;
+  font-size: 0.875rem;
+  font-weight: 500;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.error-pill {
+  background-color: #dc2626; /* Tailwind red-600 */
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  font-size: 0.875rem;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+
 .map-side {
   width: 100%;
   height: 100%;