How to know when directionsService returns it's status?

Question

In the code below (watch error console!) I'm rapidly querying Google Maps for ten different locations to know wether it can calculate a route to there or not. This does work, but I need the result from Google to come in before continuing with the loop (alternating lines in the console, not like right now where my loop runs through and only then comes the status from Google).

How do I do this?

After trying this with callbacks for quite a while, I learned here Google Maps V3 setDirections() callback I probably need to do this with an event listener. So I tried searching the API Reference but could not find anything even close... but then again, I'm quite the newb so... any ideas?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title></title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?"></script>
</head>
<body style="font-family: Arial; font-size: 12px; color:#FFFFFF;" bgcolor="#202020">
  <div id="map" style="width: 300px; height: 300px;"></div>
  <script type="text/javascript">


  var counter = 0;
  var destination_lat = 52.498775;
  var destination_long = 13.518474;


  do  {
    var destination_long = (destination_long + 0.2);
    var destination = destination_lat + ", " + destination_long;
    var finaldestination = destination.toString();
    calcRoute();
    console.error('longitude: ' + destination_long.toFixed (1) + ', counter: ' + counter);
    counter = (counter + 1);
  }
  while (counter < 10);


  function calcRoute() {
    var directionsService = new google.maps.DirectionsService();

    var request = {
      origin: 'Potsdamer Platz, 10785 Berlin',
      destination: finaldestination,
      travelMode: google.maps.DirectionsTravelMode.TRANSIT,
    };
    directionsService.route(request, function(response, status) {
      console.error('DirectionsStatus is ' + status);
    });
  }


  </script>
</body>
</html>

duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — geocodezip, Jan 04 '17 at 04:20

user3647558 · Answer 1 · 2017-01-04T21:28:33.137

i thougt i need an event listener but acutally geocodezip is right in his comment - i did not (and i'm pretty sure i still do not fully) understand asynchronity.

anyway, the code below works as intended - no idea wether this is a good way of doing this but it does work (only thing: i changed it slightly so it does not always make ten queries but only queries as long as there is no route and stops once there is one):

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title></title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?"></script>
</head>
<body style="font-family: Arial; font-size: 12px; color:#FFFFFF;" bgcolor="#202020">
  <script type="text/javascript">


  var destination_lat = 53.5219216;
  var destination_long = 13.4110207;
  var finaldestination = 'lalala';
  var valid_route = 1; // is set to 0 if route is valid, otherwise counts loops


  mainLoop();

  function mainLoop() {
    if (valid_route >= 1) {
      destination_long = (destination_long + 0.2);
      finaldestination = (destination_lat + ", " + destination_long);
      finaldestination = finaldestination.toString();
      calcRoute();
      console.error('longitude: ' + destination_long.toFixed (1) + ', loop count (valid_route): ' + valid_route);
    }
  }

  function calcRoute() {
    var directionsService = new google.maps.DirectionsService();

    var request = {
      origin: 'Potsdamer Platz, 10785 Berlin',
      destination: finaldestination,
      travelMode: google.maps.DirectionsTravelMode.TRANSIT,
    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        valid_route = 0;
      }
      else {
        valid_route = (valid_route + 1);
      }
      console.error('DirectionsStatus is ' + status);
      mainLoop();
    });
  }


  </script>
</body>
</html>

How to know when directionsService returns it's status?

1 Answers1