add: map directions & set data load in form edit

src/composables/useDirectionRender.js

@@ -0,0 +1,54 @@
+import { ref } from "vue";
+
+export default function useDirectionsRender() {
+
+    const originCoords = ref(null);
+    const destinationCoords = ref(null);
+    const polylines = ref([]);
+    const geocodeAddress = async (address) => {
+      // Utiliza la API de geocodificación de Google Maps para obtener las coordenadas
+      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}`
+          );
+          const data = await response.json();
+          const location = data.results[0].geometry.location;
+          return location;
+      } catch (error) {
+        return null;
+      }
+    };
+
+    const getDirections = async () => {
+      const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs';
+      const originLatLng = `${originCoords.value.lat},${originCoords.value.lng}`;
+      const destinationLatLng = `${destinationCoords.value.lat},${destinationCoords.value.lng}`;
+      try {
+          const response = await fetch(
+            `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&key=${apiKey}`
+          );
+          const data = await response.json();
+    
+          if (data.routes && data.routes.length > 0) {
+            const steps = data.routes[0].legs[0].steps;
+            const routePolyline = steps.map((step) => ({
+              lat: step.end_location.lat,
+              lng: step.end_location.lng,
+            }));
+            polylines.value = routePolyline;
+          }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    return {
+        originCoords,
+        geocodeAddress,
+        getDirections,
+        polylines
+    }
+}