fix: correct Routes API service usage and fix bus stops missing markers

frontend/src/composables/useDirectionsRoute.ts

@@ -41,7 +41,8 @@ export function useDirectionsRoute() {
 
         try {
             // Importar librerías necesarias de la nueva API
-            const { Route } = await google.maps.importLibrary("routes") as any;
+            const { RoutesService } = await google.maps.importLibrary("routes") as any;
+            const routeService = new RoutesService();
 
             // Límite de la API de Google Maps Routes: Origen, Destino, y hasta 25 intermediates
             const maxPuntosPorChunk = 25;
@@ -79,7 +80,7 @@ export function useDirectionsRoute() {
                 }));
 
                 try {
-                    const response = await Route.computeRoutes({
+                    const response = await routeService.computeRoutes({
                         origin,
                         destination,
                         intermediates,

frontend/src/composables/useGoogleMaps.ts

@@ -417,7 +417,8 @@ export function useGoogleMaps() {
 
         try {
             // Cargar ruta
-            const { Route } = await google.maps.importLibrary("routes") as any;
+            const { RoutesService } = await google.maps.importLibrary("routes") as any;
+            const routeService = new RoutesService();
 
             const tamañoChunk = 25;
 
@@ -451,7 +452,7 @@ export function useGoogleMaps() {
                 }));
 
                 try {
-                    const response = await Route.computeRoutes({
+                    const response = await routeService.computeRoutes({
                         origin,
                         destination,
                         intermediates,

frontend/src/composables/useParadaCercana.ts

@@ -56,11 +56,12 @@ export function useParadaCercana() {
         let mejorRutaPuntos: google.maps.LatLng[] = [];
 
         try {
-            const { Route } = await google.maps.importLibrary("routes") as any;
+            const { RoutesService } = await google.maps.importLibrary("routes") as any;
+            const routeService = new RoutesService();
 
             for (const stop of top5) {
                 try {
-                    const response = await Route.computeRoutes({
+                    const response = await routeService.computeRoutes({
                         origin: {
                             location: {
                                 latLng: {

frontend/src/views/MapView.vue

@@ -406,11 +406,13 @@ function clearMapMarkers() {
 }
 
 async function updateMapMarkers() {
-  if (!isLoaded.value || !map.value) return;
+  if (!isLoaded.value || !map.value || isUpdatingMarkers.value) return;
 
+  isUpdatingMarkers.value = true;
   const currentRequestRouteId = routeStore.selectedRouteId;
   const stops = [...routeStore.selectedRouteStops];
   
+  try {
     if (!currentRequestRouteId || stops.length === 0) {
       clearMapMarkers();
       return;
@@ -428,8 +430,6 @@ async function updateMapMarkers() {
     }
 
     // Agregar todos los stops como marcadores 'normales' para que se vean en el mapa
-  const { paradaCercana } = useParadaCercana();
-  
     stops.forEach(stop => {
         // Evitar sobre dibujar si es la cercana (useFlujoPrincipal ya se encargó)
         if (paradaCercana.value && stop.id === paradaCercana.value.id) return;
@@ -441,6 +441,9 @@ async function updateMapMarkers() {
             () => handleBusStopClick(stop)
         );
     });
+  } finally {
+    isUpdatingMarkers.value = false;
+  }
 }
 
 function updateMarkersStyles() {
@@ -679,8 +682,9 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
 
   // 2. Trazar línea de puntos verde siguiendo RED VIAL PRINCIPAL
   try {
-    const { Route } = await google.maps.importLibrary("routes") as any;
+    const { RoutesService } = await google.maps.importLibrary("routes") as any;
-    const response = await Route.computeRoutes({
+    const routeService = new RoutesService();
+    const response = await routeService.computeRoutes({
       origin: {
         location: {
           latLng: { latitude: origin.lat, longitude: origin.lng }