add: getDirections in maps

src/components/MakeProposalModal.vue

@@ -3,7 +3,7 @@
     import CardEmpty from './CardEmpty.vue';
     import Spiner from './ui/Spiner.vue';
     import BadgeError from './ui/BadgeError.vue';
-    import { GoogleMap, Marker } from 'vue3-google-map';
+    import { GoogleMap, Marker, Polyline } from 'vue3-google-map';
     import useDirectionsRender from '../composables/useDirectionRender';
     import { useAuthStore } from '../stores/auth';
     import { useCompanyStore } from '../stores/company';
@@ -11,11 +11,13 @@
     import { saveProposal } from '../services/vehicles'
     import Swal from 'sweetalert2';
 
+    const mapKey = import.meta.env.VITE_MAP_KEY;
 
     const zoom = ref(6);
     const heightMap = ref(768);
     const originCoords = ref(null);
     const destinationCoords = ref(null);
+    const polylines = ref([]);
     const isLoading = ref(false);
     const loadingSubmit = ref(false);
     const windowWidth = ref(window.innerWidth);
@@ -28,7 +30,7 @@
         comments: '',
     });
 
-    const { geocodeAddress } = useDirectionsRender()
+    const { geocodeAddress, getDirections } = useDirectionsRender()
 
     const props = defineProps({
         load: {
@@ -61,6 +63,7 @@
         await vehiclesStore.fetchVehicles(filterQuery);
         originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
         destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
+        polylines.value = await getDirections(originCoords.value, destinationCoords.value);
         isLoading.value = false;
         console.log(props.proposal);
         if(props.proposal) {
@@ -204,7 +207,7 @@
                             </form>
                             <GoogleMap
                                 v-if="!proposal"
-                                api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
+                                :api-key="mapKey"
                                 :center="{lat:19.432600, lng:-99.133209}"
                                 :zoom="zoom" 
                                 :min-zoom="2"
@@ -221,13 +224,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>
                         <CardEmpty v-else text="No hay coincidencia"/>