Why can't I return the calculated distance (from Google Maps API) in a function?

Question

I've been trying to write a program which ultimately will take a set of distances and input them into an array. Through the code I've attached, I found the distance between 2 locations, and I can put that distance into the console log— I just can't return it in that function. I've tried using async/await and Promises to maybe try and get it out of the function, but that results in the array containing fulfilled promises, however the data is "undefined" (in the code below, I removed async await implementation). Please advise on how I can return this distance value and eventually put it into an array.

function getDistances(directionsService, destination){

    var route = {origin: document.getElementById("Address").value, // User input for their address
      destination: destination,
      travelMode: 'DRIVING'}

    directionsService.route(route, // Request for a route
    function(response, status) { 
      if (status !== 'OK') {
        window.alert('Directions request failed due to status error: ' + status);
        return;
      } 
      else {
        var directionsData = response.routes[0].legs[0]; // Get data about the mapped route
        if (!directionsData) {
          window.alert('Directions request failed');
          return;
        }
        else {
            
            var currentDist = directionsData.distance.value;
            return currentDist; // When this is returned, it's always undefined

}

function getDistances(directionsService, destination){

you're not returning anything in `function getDistances` - you mention promises, but your code doesn't use promises ... either way, you will never be able to return anything directly useful from `function getDistances` since results from `directionsService.route` are asynchronous - you could return a Promise from `getDistances` that is resolved inside `directionsService.route` callback — Jaromanda X, Sep 25 '20 at 04:58

score 0 · Answer 1 · answered Sep 25 '20 at 05:06

If you want to use promises - then return a Promise you could return a Promise from getDistances that is resolved inside directionsService.route callback

Something like

function getDistances(directionsService, destination) {
    return new Promise(function (resolve, reject) {
        var route = {
            origin: document.getElementById("Address").value, // User input for their address
            destination: destination,
            travelMode: 'DRIVING'
        }

        directionsService.route(route, function (response, status) {
            if (status !== 'OK') {
                reject({ response, status, reason: 'Directions request failed due to status error' });
            } else {
                var directionsData = response.routes[0].legs[0]; // Get data about the mapped route
                if (!directionsData) {
                    reject({ response, status, reason: 'Directions request failed' });
                } else {
                    resolve(directionsData.distance.value);
                }
            }
        });
    });
}

However, this assumes that directionsService.route callback is called exactly once (you mention Array in your question, so ... not sure where there is an Array in your code)

This works, thanks! Now I'm trying to access the value that's in the returned Promise. How would I do that? I have an array of these promises and want to find the element with the least distance. When I try to sort and do operations, it doesn't work because what's in the array aren't numbers. Is there a way to access just the value in the Promise? Thanks. — Jackson, Oct 09 '20 at 04:33

Why can't I return the calculated distance (from Google Maps API) in a function?

1 Answers1