Load Google Direction Service on Vue

Question

I'm new to Vue and have been having a bit of difficulty setting up DirectionService. I wanted to set up a google direction service to show on my map, I've got the map setup and Autocomplete working, I'm also using a plugin by Fawmi https://vue-map.netlify.app/

I wanted to look similar to the google maps direction service https://developers.google.com/maps/documentation/javascript/examples/directions-simple but use GMapAutocomplete and origin and destination buttons to add the markers.

Here's my code:

<template>
  <div class="navigation__header">
    <div class="navigation__inputs">
      <div class="input__col row">
        <i class="icons fa-solid fa-user"></i>
        <GMapAutocomplete
          @place_changed="setPlace"
          :options="autoCompleteOptions"
        />
        <button class="origin" @click="addMarker">Add</button>
      </div>

      <div class="input__col row">
        <i class="icons fa-solid fa-location-dot"></i>
        <GMapAutocomplete
          @place_changed="setPlaceTwo"
          :options="autoCompleteOptions"
        />
        <button class="destination" @click="addMarker">Add</button>
      </div>

      <div class="btn__col row justify-end">
        <router-link to="/">
          <q-btn
            class="home__navigation"
            unelevated
            rounded
            color="primary"
            label="Back"
          />
        </router-link>
        <router-link to="/passangers">
          <q-btn
            class="confirm__navigation"
            unelevated
            rounded
            color="primary"
            label="Confirm"
          />
        </router-link>
      </div>
    </div>
  </div>

  <GMapMap
    :center="center"
    v-on:focus="loadDirection"
    :zoom="11.6"
    style="width: 100vw; height: 100vh"
  >
    <!-- <GMapMarker
      class="startLocation"
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      @click="center = m.position"
    />
    <GMapMarker
      class="endLocation"
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      @click="center = m.position"
    /> -->
    <!-- <GMapPolygon :path="markers" :editable="true" ref="polyline" /> -->
  </GMapMap>
</template>

<script>
export default {
  data() {
    return {
      center: { lat: 32.76264440195262, lng: -16.957439957100192 },
      places: [],
      markers: [],
      currentPlace: null,
      autoCompleteOptions: {
        componentRestrictions: {
          country: ['PT'],
        },
      },
    };
  },

  mounted() {
    this.geolocate();
    this.loadDirection();
  },

  methods: {
    loadDirection() {
      const directionsService = new window.google.maps.DirectionsService();
      const directionsRenderer = new window.google.maps.DirectionsRenderer();
      directionsRenderer.setMap(map.value);
      console.log(calculateAndDisplayRoute);
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    },

    calculateAndDisplayRoute(directionsService, directionsRenderer) {
      const origin = document.querySelector('.origin');
      const destination = document.querySelector('.destination');
      console.log(origin, destination);
      directionsService
        .route({
          origin: origin,
          destination: destination,
          waypoints: props.waypoints,
          travelMode: window.google.maps.TravelMode.DRIVING,
        })
        .then((response) => {
          directionsRenderer.setDirections(response);
        })
        .catch((e) =>
          window.alert('Directions request failed due to ' + status)
        );
    },

    geolocate: function () {
      navigator.geolocation.getCurrentPosition((position) => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
      });
    },
  },
};
</script>

Load Google Direction Service on Vue

0 Answers0