add: getDirections in maps

src/views/TrackingLoadView.vue

@@ -8,9 +8,11 @@
     import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
     import CardEmpty from '../components/CardEmpty.vue';
 
+    const mapKey = import.meta.env.VITE_MAP_KEY;
+
     const isLoading = ref(true);
     const loadStore = useLoadsStore();
-    const { geocodeAddress, getDirections, polylines } = useDirectionsRender()
+    const { geocodeAddress, getDirections } = useDirectionsRender()
     const route = useRoute();
     const load = ref(null);
     const zoom = ref(6);
@@ -18,6 +20,7 @@
     const vehicleLastLocation = ref(null);
     const originCoords = ref(null);
     const destinationCoords = ref(null);
+    const polylines = ref([]);
     const isLoadActive = ref(false);
     const windowWidth = ref(window.innerWidth);
 
@@ -47,7 +50,7 @@
                 console.log(vehicleLastLocation);
             }
 
-            await getDirections(originCoords.value, destinationCoords.value);
+            polylines.value = await getDirections(originCoords.value, destinationCoords.value);
 
             console.log(load.value.load_status);
             switch (load.value.load_status) {
@@ -89,7 +92,7 @@
         <div v-if="load">
             <CardLoad :load="load" :read-only="true"/>
             <GoogleMap
-                    api-key="AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A"
+                    :api-key="mapKey"
                     :center="{lat:19.432600, lng:-99.133209}"
                     :zoom="zoom" 
                     :min-zoom="2"
@@ -118,6 +121,7 @@
                         </div>
                     </CustomMarker>
                     <Polyline 
+                        v-if="polylines"
                         :options="{
                             path: polylines,
                             // geodesic: true,