Get directions to predefined destination from current location (Geolocation)

Nog I have following page with directions to the predefined destination: example directions

This is working perfect with following code:

    <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;

        var lattp = <?php echo json_encode($lattp);?>;
        var lngtp = <?php echo json_encode($lngtp);?>;
        var zoomtp = <?php echo json_encode($zoomtp);?>;
        var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};



        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: JSON.parse(zoomtp),
          center: tp
        });
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay);

      }

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

        }, function() {
          handleLocationError(true, markerme);
        });
     } else {
      // Browser doesn't support Geolocation
      window.alert('Geolocation is not supported');
     }

     function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var latrest = <?php echo json_encode($latrest);?>;
        var lngrest = <?php echo json_encode($lngrest);?>;
        var rest = {lat: JSON.parse(latrest), lng: JSON.parse(lngrest)};

        //var selectedMode = "WALKING";
        directionsService.route({
          origin: {lat: 51.203278, lng: 2.758969},  // current position.
          destination: rest,  // restaurant.
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode.WALKING
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWTXOkLL3td_c8oQni-qi74ICSypn7GM8&callback=initMap">
    </script>
  </body>

As you can see I tried to implement my current position as the origin. I already tried to get the variable pos as origin, but this is not working... Even the Google Guides were not clear to me...

Thanks for helping!

Answers:

Answer

Your current position is declared inside another fuction, so it's basically invisible to every other functions.

   navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

    }, function() {
      handleLocationError(true, markerme);
    });

I'd suggest calculating your position inside initMap and then passing your current position as a parameter to calculateAndDisplayRoute.

function initMap() {
    ...
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: JSON.parse(zoomtp),
      center: tp
    });
    directionsDisplay.setMap(map);

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

      }, function() {
        handleLocationError(true, markerme);
       });
    } else {
     // Browser doesn't support Geolocation
     window.alert('Geolocation is not supported');
    }


 }

function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    var latrest = <?php echo json_encode($latrest);?>;
    var lngrest = <?php echo json_encode($lngrest);?>;
    var rest = {lat: JSON.parse(latrest), lng: JSON.parse(lngrest)};

    //var selectedMode = "WALKING";
    directionsService.route({
      origin: pos,  // current position.
      destination: rest,  // restaurant.
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode.WALKING
    }, function(response, status) {
      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.