Tips for retrieving the location of a draggable waypoint in the Google Directions output

Question

Tips for retrieving the location of a draggable waypoint in the Google Directions output

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Location Partner</title>

  <!--styles for map elements-->
  <style type="text/css">
    html {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      height: 100%;
    }
    
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    /*start styles for the ContextMenu*/
    
    .context_menu {
      background-color: white;
      border: 1px solid gray;
    }
    
    .context_menu_item {
      padding: 3px 6px;
    }
    
    .context_menu_item:hover {
      background-color: #CCCCCC;
    }
    
    .context_menu_separator {
      background-color: gray;
      height: 1px;
      margin: 0;
      padding: 0;
    }
    /*end styles for the ContextMenu*/
    
    #map_container {
      height: 100%;
    }
  </style>


  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=quarterly&key=#YOURAPIKEY#&sensor=false"></script>
  
  <script type="text/javascript">
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map_container'), {
        zoom: 4,
        center: {
          lat: -24.345,
          lng: 134.46
        } // Australia.
      });

      var directionsService = new google.maps.DirectionsService;
      var directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true,
        map: map,
        panel: document.getElementById('right-panel')
      });

      directionsDisplay.addListener('directions_changed', function() {
        computeTotalDistance(directionsDisplay.getDirections());
      });

      displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
        directionsDisplay);
    }

   ...

</html>

Capturing the location of a draggable waypoint in Google Maps API to save it in the database and load the same directions later.

Efforts to access the waypoint's location via

result.routes[0].legs[0].via_waypoints[0]

show an empty response for lat and lng. Same goes for

result.routes[0].legs[0].via_waypoint[0].location

.

A suggestion in the code to use

result.routes[0].legs[0].via_waypoints[0].k

and

result.routes[0].legs[0].via_waypoints[0].D

did not yield results. Forum discussions propose using location.wa and location.ya, which also failed to provide geolocation data.

Remember to replace #YOURAPIKEY# with your Google API key in the code snippet for it to work. This example is based on Google's documentation.

Any assistance or insights on this issue would be greatly appreciated.

javascript google-maps-api-3

Answer 1

Answer №1

Every segment of your journey consists of a series of steps, and in the scenario you provided, each segment corresponds to directions between one of your stops (origin, waypoints, destination).

leg[0] from Perth to Adelaide
leg[1] from Adelaide to Broken Hill
leg[2] from Broken Hill to Sydney

Therefore, there will be no entries in the via_waypoints property.

If you wish for the waypoints not to be treated as actual stops, you must set stopover: false in your waypoints. This way, the via_waypoints property will be populated for each segment (if there is more than one).

waypoints: [{
  location: 'Adelaide, SA',
  stopover: false
}, {
  location: 'Broken Hill, NSW',
  stopover: false
}],

You can then loop through via_waypoints to retrieve the coordinates.

lat and lng are methods, not properties, so they need to be invoked like so:

let firstWaypointLat = result.routes[0].legs[0].via_waypoints[0].lat();

Below is an example of how to obtain the coordinates of the waypoints:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {
      lat: -24.345,
      lng: 134.46
    } // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
    directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{
      location: 'Adelaide, SA',
      stopover: false
    }, {
      location: 'Broken Hill, NSW',
      stopover: false
    }],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {

  let leg = result.routes[0].legs[0];
  for (let i=0; i<leg.via_waypoints.length; i++) {
  
    console.log('Waypoint ' + i + ' coords: ' + leg.via_waypoints[i].lat() + ', ' + leg.via_waypoints[i].lng());
  }
}

initMap();

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Answer 2

Every segment of your journey consists of a series of steps, and in the scenario you provided, each segment corresponds to directions between one of your stops (origin, waypoints, destination).

leg[0] from Perth to Adelaide
leg[1] from Adelaide to Broken Hill
leg[2] from Broken Hill to Sydney

Therefore, there will be no entries in the via_waypoints property.

If you wish for the waypoints not to be treated as actual stops, you must set stopover: false in your waypoints. This way, the via_waypoints property will be populated for each segment (if there is more than one).

waypoints: [{
  location: 'Adelaide, SA',
  stopover: false
}, {
  location: 'Broken Hill, NSW',
  stopover: false
}],

You can then loop through via_waypoints to retrieve the coordinates.

lat and lng are methods, not properties, so they need to be invoked like so:

let firstWaypointLat = result.routes[0].legs[0].via_waypoints[0].lat();

Below is an example of how to obtain the coordinates of the waypoints:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {
      lat: -24.345,
      lng: 134.46
    } // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
    directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{
      location: 'Adelaide, SA',
      stopover: false
    }, {
      location: 'Broken Hill, NSW',
      stopover: false
    }],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {

  let leg = result.routes[0].legs[0];
  for (let i=0; i<leg.via_waypoints.length; i++) {
  
    console.log('Waypoint ' + i + ' coords: ' + leg.via_waypoints[i].lat() + ', ' + leg.via_waypoints[i].lng());
  }
}

initMap();

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Tips for retrieving the location of a draggable waypoint in the Google Directions output

Answer №1

Similar questions

Enclose every line of the paragraph within a <span> element

Encountering a Selection Issue with IE8

Node.js has no trouble loading HTML files, however, it seems to encounter issues when trying to

Enhanced form validation using AJAX

Techniques for dynamically counting rows in a table using JavaScript

Passing a variable as a property to a nested child component in Vue.js

How can we implement the MUI snackbar to only show when a successful login occurs in ReactJS?

Can a file be successfully retrieved using an HTTP POST request?

utilize text offsets to insert tags within strings

What are the steps to resolving an issue in a Jest unit test?

Exploring the isolate scope within a compiled directive

Retrieving JSON data from outside the React root directory

One limitation is that you cannot use JQuery to make multiple rows editable simultaneously

What is the best way to alter the header in Django when a user is authenticated?

Build an object using a deeply nested JSON structure

Provide the aggregated content within d3's text() or html() function

Only output to the console if the data returned from an AJAX request has been

JavaScript ACTING UP -> CROSS-ORIGIN RESOURCE ACCESS ERROR

Discovering the method to retrieve a previous month's date within a VueJs application using Javascript

Is it necessary to mark all checkboxes in the initial column of the gridview?