JavaScript - Google Maps: Total Distance function returning undefined

Question

I'm trying to use the directionsService to find the total distance of a route with waypoints, but whenever I try to use the function, it keeps returning undefined, although it displays the correct answer. Here's my code:

function addHexWaypts()

  firstPoint_1 = new google.maps.geometry.spherical.computeOffset(tempWaypt, distanceSide*1000, (directions[0]+90));
  secondPoint_1 = new google.maps.geometry.spherical.computeOffset(firstFirstPoint, oneThird*1000, directions [0]);

  firstPoint_2 = new google.maps.geometry.spherical.computeOffset(tempWaypt, distanceSide*1000, (directions[0]-90));
  secondPoint_2 = new google.maps.geometry.spherical.computeOffset(secondFirstPoint, oneThird*1000, directions [0]);

  var firstRoute = checkThisHex(firstPoint_1, secondPoint_1,0);
  var secondRoute = checkThisHex(firstPoint_2, secondPoint_2,1);

  //checkThisHex is the function in question

  var bool = compareHex(firstRoute, secondRoute);

  if (bool = true)
  {
    fillWaypts(firstFirstPoint, firstSecondPoint);
  }
  else
  {
    fillWaypts(secondFirstPoint, secondSecondPoint);
  }
  calculateAndDisplayRoute();
}

function checkThisHex(first, second, num)
{
  var total = 0;
  var number = 0;
  var waypointsTesting = [];
  waypointsTesting.push({
    location: first,
    stopover: false
  });
  waypointsTesting.push({
    location: second,
    stopover: false
  });
  directionsService.route({
    origin: document.getElementById('routeStart').value,
    destination: document.getElementById('routeEnd').value,
    waypoints: waypointsTesting,
    optimizeWaypoints: true,
    travelMode: 'BICYCLING'
  },
  function(response, status) {
    if (status === 'OK')
    {

      var myroute = response.routes[0];
      for (var i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000;

      if (num==0)
      {
        document.getElementById("printInfo1").innerHTML = total;
        return total;
      }
      else
      {
        document.getElementById("printInfo2").innerHTML = total;
        return total;
      }
      //I use "num" to display the distances of both routes, which works... but it keeps returning undefined
    }
  });
}

Answer 1

The routing service doesn't return sychronously so

  var firstRoute = checkThisHex(firstPoint_1, secondPoint_1,0);
  var secondRoute = checkThisHex(firstPoint_2, secondPoint_2,1);

Will always be undefined. You need to pass a callback function to checkThisHex like so:

function checkThisHex(first, second, num,callback) {
   ....

  if (num==0)
      {
        document.getElementById("printInfo1").innerHTML = total;
        callback(total);
      }
      else
      {
        document.getElementById("printInfo2").innerHTML = total;
        callback(total);
      }

}

And change your first function in the lines of:

  checkThisHex(firstPoint_1, secondPoint_1,0,function(firstRoute) { 
      checkThisHex(firstPoint_2, secondPoint_2,1,function(secondRoute){ 


        var bool = compareHex(firstRoute, secondRoute);

        if (bool = true)
        {
          fillWaypts(firstFirstPoint, firstSecondPoint);
        }
        else
        {
          fillWaypts(secondFirstPoint, secondSecondPoint);
        }
        calculateAndDisplayRoute();

      });

  });