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

Create Vuetify components dynamically through programming

Observing Node.js processes to track the peak memory usage of each process

Verify whether the value is considered false, true, or null

The Xero Node OAuth Authorize Callback URL is malfunctioning after granting access

Node.JS 3DES encryption encountering an issue with IV length validation

Incorporate different courses tailored to the specific job role

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

Prevent Buttons from Being Clicked While Another is Active in Angular

Passing the contents of a datatable as parameters to a PHP script

Observing exceptional inquiries

What is the best way to save inputted names as properties of an object and assign the corresponding input values as the values of those properties?

Using the HTML select tag to choose an integer value with AngularJS

JavaScript encountered an error stating "phone is not defined" due to an uncaught ReferenceError

Retrieve the information from the recently completed request

Simplify nested JSON data

Surprising outcome from the glob-fs glob.readdirSync function

Enhance the speed of AJAX search within a UL LI list containing over 5000 objects

The complexity surrounding various versions of jQuery, the .noConflict method, and the jQuery migrate feature

What could be causing my Vue component to not refresh?

Select from a variety of backgrounds using the dropdown menu on the site