Google map API route from current location to marker

Working with the Google map API and routes or directions. I would like it such that when a user clicks a marker the route from the user's current location to that marker would render.

I have been studying the Google maps API documentation direction services example here.

Here is my attempt at adapting that. To me it seems this should work, so what am I missing? The route or direction between the user's current location and the marker is not rendering.

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Google Map</h1>

    <div id="googleMap" style="width: 60%; height: 800px"></div>

    <script>
      var myLatLng;

      function geoSuccess(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();
        myLatLng = {
          lat: latitude,
          lng: longitude,
        };
        var mapProp = {
          //            center: new google.maps.LatLng(latitude, longitude), // puts your current location at the centre of the map,
          zoom: 15,
          mapTypeId: "roadmap",
        };
        var map = new google.maps.Map(
          document.getElementById("googleMap"),
          mapProp
        );

        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        //call renderer to display directions
        directionsDisplay.setMap(map);

        var bounds = new google.maps.LatLngBounds();
        //        var mapOptions = {
        //            mapTypeId: 'roadmap'
        //        };

        // Multiple Markers
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: "My location",
        });
        var markers = [
          ["Ragazzi", 53.201472, -6.111626],
          ["McDonalds", 53.200482, -6.111337],
          ["my location", latitude, longitude],
        ];

        // Info Window Content
        var infoWindowContent = [
          [
            "<div>" +
              "<h3>Ragazzi</h3>" +
              "<p>Cafe eatin place.</p>" +
              ' <button onclick="calculateAndDisplayRoute(marker, i)"> Get Directions</button>' +
              "</div>",
          ],
          [
            '<div class="info_content">' +
              "<h3>McDonalds</h3>" +
              "<p>Excellent food establishment, NOT!.</p>" +
              '<button onclick="calculateAndDisplayRoute(marker, i)"> Get Directions</button>' +
              "</div>",
          ],
        ];

        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow(),
          marker,
          i;

        // Loop through our array of markers & place each one on the map
        for (i = 0; i < markers.length; i++) {
          var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
          bounds.extend(position);
          marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
          });

          // Allow each marker to have an info window
          google.maps.event.addListener(
            marker,
            "click",
            (function (marker, i) {
              return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
              };
            })(marker, i)
          );

          marker.addListener("click", function () {
            directionsService.route(
              {
                // origin: document.getElementById('start').value,
                origin: myLatLng,
                destination: marker.getPosition(),
                travelMode: "DRIVING",
              },
              function (response, status) {
                if (status === "OK") {
                  directionsDisplay.setDirections(response);
                } else {
                  window.alert("Directions request failed due to " + status);
                }
              }
            );
          });
          // Automatically center the map fitting all markers on the screen
          map.fitBounds(bounds);
        }
      }

      // function calculateAndDisplayRoute(directionsService, directionsDisplay) {
      //     directionsService.route({
      //         // origin: document.getElementById('start').value,
      //         origin: myLatLng,
      //         destination: marker.getPosition(),
      //         travelMode: 'DRIVING'
      //     }, function(response, status) {
      //         if (status === 'OK') {
      //             console.log('all good');
      //             directionsDisplay.setDirections(response);
      //         } else {
      //             window.alert('Directions request failed due to ' + status);
      //         }
      //     });
      // }

      function geoError() {
        alert("Geocoder failed.");
      }

      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
          // alert("Geolocation is supported by this browser.");
        } else {
          alert("Geolocation is not supported by this browser.");
        }
      }
    </script>

    <script
      async
      src="https://maps.googleapis.com/maps/api/js?key=api key here"
    ></script>
  </body>
</html>

Solution

I have solved this. The problem was the line,

destination: marker.getPosition(),

was not correct. This was giving me the coordinates of my current location and not the marker clicked.

I set the latit and longit in the function that sets the infoWindow, which have been defined as a global variable,

// Allow each marker to have an info window
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                    latit = marker.getPosition().lat();
                    longit = marker.getPosition().lng();
                    // console.log("lat: " + latit);
                    // console.log("lng: " + longit);
                }
            })(marker, i));

Then these are set to the destination,

        marker.addListener('click', function() {
            directionsService.route({
                // origin: document.getElementById('start').value,
                origin: myLatLng,

                // destination: marker.getPosition(),
                destination: {
                    lat: latit,
                    lng: longit
                },
                travelMode: 'DRIVING'
            }, function(response, status) {
                if (status === 'OK') {
                    directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });

        });

The full code is here on github.

A gh-pages working example.