add: getDirections in maps

src/composables/useDirectionRender.js

@@ -3,18 +3,19 @@ import { decode } from 'polyline';
 
 export default function useDirectionsRender() {
 
+  const mapKey = import.meta.env.VITE_MAP_KEY;
+
     const originCoords = ref(null);
     const destinationCoords = ref(null);
-    const polylines = ref([]);
+    // const polylines = ref([]);
     const geocodeAddress = async (address) => {
       // Utiliza la API de geocodificación de Google Maps para obtener las coordenadas
-      const apiKey = 'AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A'; // Reemplaza con tu clave de API
       // const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API
       try {
           const response = await fetch(
             `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
               address
-            )}&key=${apiKey}`
+            )}&key=${mapKey}`
           );
           const data = await response.json();
           const location = data.results[0].geometry.location;
@@ -25,28 +26,32 @@ export default function useDirectionsRender() {
     };
 
     const getDirections = async (originCoords, destinationCoords) => {
-      console.log('GET directions,', originCoords)
-      const apiKey = 'AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A';
       const originLatLng = `${originCoords.lat},${originCoords.lng}`;
       const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
       try {
-          let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${apiKey}`;
+          let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${mapKey}`;
           const response = await fetch(url);
           const data = await response.json();
+          let polylines = [];
           if (data.routes && data.routes.length > 0) {
             const steps = data.routes[0].legs[0].steps;
             steps.forEach(item => {
               const points = decode(item.polyline.points);
               points.forEach(poly => {
-                polylines.value.push({
+                polylines.push({
                   lat: poly[0],
                   lng: poly[1]
                 })
               })
             });
+            console.log(polylines)
+            return polylines;
+          } else {
+            return [];
           }
       } catch (error) {
         console.log(error);
+        return [];
       }
     };
 
@@ -54,6 +59,6 @@ export default function useDirectionsRender() {
         originCoords,
         geocodeAddress,
         getDirections,
-        polylines
+        // polylines
     }
 }