add: getDirections in maps

src/components/LoadDetailModal.vue

@@ -2,15 +2,17 @@
     import { ref, onMounted } from 'vue';
     import CardEmpty from './CardEmpty.vue';
     import Spiner from './ui/Spiner.vue';
-    import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
+    import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
     import useDirectionsRender from '../composables/useDirectionRender';
     import Cardload from './CardLoad.vue';
     import { useLoadsStore } from '../stores/loads';
 
+    const mapKey = import.meta.env.VITE_MAP_KEY;
 
     const zoom = ref(6);
     const heightMap = ref(768);
     const originCoords = ref(null);
+    const polylines = ref([]);
     const destinationCoords = ref(null);
     const isLoading = ref(false);
     const windowWidth = ref(window.innerWidth);
@@ -18,7 +20,7 @@
     const vehicleLastLocation = ref(null);
     const isLoadActive = ref(false);
 
-    const { geocodeAddress } = useDirectionsRender()
+    const { geocodeAddress, getDirections } = useDirectionsRender()
 
     const props = defineProps({
         proposal: {
@@ -50,6 +52,7 @@
             load.value = resp.data[0];
             originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
             destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
+            polylines.value = await getDirections(originCoords.value, destinationCoords.value);
             if(load.value.vehicle) {
                 vehicleLastLocation.value = {
                     lat: parseFloat(load.value.vehicle.last_location_lat),
@@ -113,7 +116,7 @@
                         <div v-if="load">
                             <Cardload :load="load" :read-only="true"/>
                             <GoogleMap
-                                    api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
+                                    :api-key="mapKey"
                                     :center="{lat:19.432600, lng:-99.133209}"
                                     :zoom="zoom" 
                                     :min-zoom="2"
@@ -141,13 +144,18 @@
                                             <i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
                                         </div>
                                     </CustomMarker>
-                                    <!-- <Polyline :options="{
-                                        path: polyline,
-                                        // geodesic: true,
-                                        strokeColor: '#FF0000',
-                                        strokeOpacity: 1.0,
-                                        strokeWeight: 2
-                                    }" /> -->
+                                    <Polyline 
+                                        v-if="polylines"
+                                        :options="{
+                                            path: polylines,
+                                            // geodesic: true,
+                                            strokeColor: '#2D90BB',
+                                            strokeOpacity: 0.7,
+                                            strokeWeight: 5,
+                                            clickable: true,
+                                            fillColor: '#75ad3e',
+                                        }" 
+                                    />
                                 </GoogleMap>
                         </div>
                         <CardEmpty v-else text="No hay información disponible"/>