title: Load Google Direction Service on Vue
body: <p>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 <a href="https://vue-map.netlify.app/" rel="nofollow noreferrer">https://vue-map.netlify.app/</a></p>
  <p>I wanted to look similar to the google maps direction service <a href="https://developers.google.com/maps/documentation/javascript/examples/directions-simple" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/directions-simple</a> but use GMapAutocomplete and origin and destination buttons to add the markers.</p>
  <p>Here's my code:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;navigation__header&quot;&gt;
      &lt;div class=&quot;navigation__inputs&quot;&gt;
        &lt;div class=&quot;input__col row&quot;&gt;
          &lt;i class=&quot;icons fa-solid fa-user&quot;&gt;&lt;/i&gt;
          &lt;GMapAutocomplete
            @place_changed=&quot;setPlace&quot;
            :options=&quot;autoCompleteOptions&quot;
          /&gt;
          &lt;button class=&quot;origin&quot; @click=&quot;addMarker&quot;&gt;Add&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;input__col row&quot;&gt;
          &lt;i class=&quot;icons fa-solid fa-location-dot&quot;&gt;&lt;/i&gt;
          &lt;GMapAutocomplete
            @place_changed=&quot;setPlaceTwo&quot;
            :options=&quot;autoCompleteOptions&quot;
          /&gt;
          &lt;button class=&quot;destination&quot; @click=&quot;addMarker&quot;&gt;Add&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;btn__col row justify-end&quot;&gt;
          &lt;router-link to=&quot;/&quot;&gt;
            &lt;q-btn
              class=&quot;home__navigation&quot;
              unelevated
              rounded
              color=&quot;primary&quot;
              label=&quot;Back&quot;
            /&gt;
          &lt;/router-link&gt;
          &lt;router-link to=&quot;/passangers&quot;&gt;
            &lt;q-btn
              class=&quot;confirm__navigation&quot;
              unelevated
              rounded
              color=&quot;primary&quot;
              label=&quot;Confirm&quot;
            /&gt;
          &lt;/router-link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;GMapMap
      :center=&quot;center&quot;
      v-on:focus=&quot;loadDirection&quot;
      :zoom=&quot;11.6&quot;
      style=&quot;width: 100vw; height: 100vh&quot;
    &gt;
      &lt;!-- &lt;GMapMarker
        class=&quot;startLocation&quot;
        :key=&quot;index&quot;
        v-for=&quot;(m, index) in markers&quot;
        :position=&quot;m.position&quot;
        @click=&quot;center = m.position&quot;
      /&gt;
      &lt;GMapMarker
        class=&quot;endLocation&quot;
        :key=&quot;index&quot;
        v-for=&quot;(m, index) in markers&quot;
        :position=&quot;m.position&quot;
        @click=&quot;center = m.position&quot;
      /&gt; --&gt;
      &lt;!-- &lt;GMapPolygon :path=&quot;markers&quot; :editable=&quot;true&quot; ref=&quot;polyline&quot; /&gt; --&gt;
    &lt;/GMapMap&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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) =&gt; {
            directionsRenderer.setDirections(response);
          })
          .catch((e) =&gt;
            window.alert('Directions request failed due to ' + status)
          );
      },
  
      geolocate: function () {
        navigator.geolocation.getCurrentPosition((position) =&gt; {
          this.center = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
        });
      },
    },
  };
  &lt;/script&gt;
  </code></pre>