Learn how to use a function in Google Maps to calculate and display distances

Question

Learn how to use a function in Google Maps to calculate and display distances

I have a script obtained from this link here and I am trying to create a function that returns the distance. This is my current script:

var calcRoute = function(origin, destination) {
    var dist;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
  var request = {
    origin:origin,
    destination:destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      dist = response.routes[0].legs[0].distance.value / 1000;
    }
  });
    return dist;
};
$scope.resto = calcRoute("-7.048357, 110.418877","-7.048443, 110.441022");

I have included two parameters in the function, and I expect it to return the distance. However, the script does not seem to be returning the value from

dist = response.routes[0].legs[0].distance.value / 1000

.

I am using angularjs and the resto in my View is not displaying the distance. Can anyone help me? Is there something wrong with the script or is it something else?

javascript angularjs google-maps google-distancematrix-api

Answer 1

Answer №1

Before the function directionsService.route is called, the function calcRoute has already run and returned the value of dist, which will be undefined at that point.

The correct way to access the value is inside the callback function of directionsService.route.

To achieve this, you can add another parameter (a callback function) to the calcRoute function. This way, once directionsService.route responds, you can pass the value to this new callback function.

Give it a try!

var calcRoute = function(origin, destination, cb) {
    var dist;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var request = {
        origin: origin,
        destination: destination,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            cb(null, response.routes[0].legs[0].distance.value / 1000);
        } else {
            cb('pass error information');
        }
    });
};

calcRoute("-7.048357, 110.418877", "-7.048443, 110.441022", function(err, dist) {
    if (!err) {        
        $scope.resto = dist;
    }
});

Answer 2

Before the function directionsService.route is called, the function calcRoute has already run and returned the value of dist, which will be undefined at that point.

The correct way to access the value is inside the callback function of directionsService.route.

To achieve this, you can add another parameter (a callback function) to the calcRoute function. This way, once directionsService.route responds, you can pass the value to this new callback function.

Give it a try!

var calcRoute = function(origin, destination, cb) {
    var dist;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var request = {
        origin: origin,
        destination: destination,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            cb(null, response.routes[0].legs[0].distance.value / 1000);
        } else {
            cb('pass error information');
        }
    });
};

calcRoute("-7.048357, 110.418877", "-7.048443, 110.441022", function(err, dist) {
    if (!err) {        
        $scope.resto = dist;
    }
});

Learn how to use a function in Google Maps to calculate and display distances

Answer №1

Similar questions

Is it possible to use JavaScript for detecting third-party videos?

unable to retrieve the response from a POST request sent to a node server

Error: The function 'myAppController' is not defined and is therefore not a valid argument

Adjust the size of a map on an HTML page after it has

Troubleshooting a problem with $addToSet and $each in Mongo and Node.js

Connecting Vue.js components together

Enhanced JavaScript Autocompletion in Integrated Development Environments

How can you convert a JavaScript object with nested arrays into JSON format?

Adjust parameters using JavaScript and three.js in real-time

What is the best way to choose an option from a <select> dropdown using Angular's Protractor version 0.24?

Tips for maintaining a sticky header while continuing to utilize Bootstrap table classes such as table-responsive and table-stripped

Utilizing Directives to Embed Attributes

The beta version of Angular 2.0 introduces the BrowserDomAdapter for easy access to the DOM

Error: Unable to convert Mongoose object to ObjectId

Template for child directive failing to reflect scope updates

Convert the jQuery functions click(), hide(), and fadeIn() into their equivalent native JavaScript functionalities

Effortlessly submit form data in Codeigniter without the need for page refreshing using jQuery ajax

Adjust the border color of Material UI's DatePicker

Angular UI date picker is currently experiencing an issue where the short date format is displaying incorrectly, showing past dates

"Node.js is giving an error stating that the object does not have a