CODEWITHSUNDEEP
javascriptjqueryfunctiongoogle-mapscallback
Marco Jordan
Marco Jordan

Reputation: 147

Callback function problems

Here I have a function calculateDistance which must return me a distance between two places and time so I write:

 function calculateDistances(start,stop) {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [start],
      destinations: [stop],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}
  function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;


    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {
       var xxx= "";
        xxx += origins[i] + ' to ' + destinations[j]
            + ': ' + results[j].distance.text + ' in '
            + results[j].duration.text + '<br>';
     return xxx;
      }
    }
  }
}

after that I write a code to implement this function into my js code:

//Start function for calculate distance
        var start = document.getElementById("from").value;
        var stop = place.formatted_address;
        contentStr += '<p>'+ calculateDistances(start,stop); + '</p>';

        //I open rendered HTML in jquery dialog when user click on marker
        $(contentStr).dialog({
          modal:true
      });

I just get as HTML: undefined and in console: Uncaught TypeError: Cannot read property '__e3_' of null

How I can solve this problem? FULL CODE: http://jsbin.com/EVEWOta/96/edit

Upvotes: 0

Views: 1014

Answers (1)

geocodezip
geocodezip

Reputation: 161334

The DirectionsService is asynchronous. You can't "return" the results from the callback function. You have to use the results when they are returned by the server (in the callback function). Not tested:

 function calculateDistances(start,stop) {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [start],
      destinations: [stop],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}
  function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var xxx= "";

    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {

        xxx += origins[i] + ' to ' + destinations[j]
            + ': ' + results[j].distance.text + ' in '
            + results[j].duration.text + '<br>';
      }
      var contentStr += '<p>'+ xxx + '</p>';
    }    
    //I open rendered HTML in jquery dialog when user click on marker
    $(contentStr).dialog({
      modal:true
    });
  }
}

//Start function for calculate distance
var start = document.getElementById("from").value;
var stop = place.formatted_address;
calculateDistances(start,stop);

Upvotes: 1

Related Questions