add: getDirections in maps

src/components/FormLoadModal.vue

@@ -24,12 +24,13 @@
     const heightMap = ref(768);
     const originCoords = ref(null);
     const destinationCoords = ref(null);
+    const polylines = ref([]);
     const startLocation = ref(null);
     const endLocation = ref(null);
     const isLoading = ref(false);
     const loadingLocations = ref(false);
     const submited = ref(false);
-    const { geocodeAddress } = useDirectionsRender();
+    const { geocodeAddress, getDirections } = useDirectionsRender();
     const formRef = ref(null);
     const filterQueryVehicles = ref([]);
     const checkLocationLoad = ref(false);
@@ -46,6 +47,8 @@
         stateDestination: null,
     });
 
+    const mapKey = import.meta.env.VITE_MAP_KEY;
+
     
     const clearLoad = () => {
         loadStore.currentLoad = null;
@@ -124,6 +127,13 @@
                 destinationCoords.value = await geocodeAddress(endLocation.value);
             }
         })
+
+        watch([originCoords, destinationCoords], async() => {
+            if(originCoords.value && destinationCoords.value) {
+                console.log('Se llama api direcciones ')
+                polylines.value = await getDirections(originCoords.value, destinationCoords.value);
+            }
+        })
     })
 
     watch(locationLoadSelected, () => {
@@ -510,7 +520,7 @@
                                     v-model="locationDownloadSelected"
                                 >
                                     <option disabled value="">-- Seleccionar locación --</option>
-                                    <option v-for="loc in companyStore.locations" :value="loc">{{ loc.branch_name }}</option>
+                                    <option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
                             </div>
                             <Custominput
@@ -566,7 +576,7 @@
                     </div>
                 </form>
                 <GoogleMap
-                    api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
+                    :api-key="mapKey"
                     :center="{lat:19.432600, lng:-99.133209}"
                     :zoom="zoom" 
                     :min-zoom="2"
@@ -583,13 +593,18 @@
                 > 
                     <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
                     <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
-                    <!-- <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>
             <div class="modal-footer custom-footer">