How to display google maps API route?

Question

JavaScript

I have a function like this which initializes a map. I need to connect several points, but what I'm doing is not working. How to do this and what am I doing wrong in this example?

initMap() {

      const loader = new Loader(this.$api.mapApiToken, {
        language: 'ru'
      })

      loader.load().then(function (google) {
        const mapInctance = new google.maps.Map(document.getElementById('google-map'), {
          center: {lat: 60.023539414725356, lng: 30.283663272857666},
          zoom: 8,
        })

        const latLng = { lat: 60.023539414725356, lng: 30.283663272857666 }
        const latLng2 = { lat: 59.79530896374892, lng: 30.410317182540894 }

        const marker = new google.maps.Marker({
          position: latLng,
          map: mapInctance
        })
        const marker2 = new google.maps.Marker({
          position: latLng2,
          map: mapInctance
        })

        console.log(marker,marker2)

        let directionsDisplay = new google.maps.DirectionsRenderer({
          map: mapInctance
        })
        let directionsService = new google.maps.DirectionsService

        directionsService.route({
          origin: {lat: 60.023539414725356, lng: 30.283663272857666},
          destination: { lat: 59.79530896374892, lng: 30.410317182540894 },
          travelMode: google.maps.TravelMode.DRIVING
        }, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        })

      })
    },
  },

Answer 1

https://github.com/sammy007-debug/Google-map-dista...
I hope I managed it and this will help you