CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3
Blazemonger
Blazemonger

Reputation: 92903

How to get Google Maps 3 Directions Service API to distinguish multiple routes?

I'm using the Google Maps API to get driving distances from multiple routes. Each route is being taken by a different driver; they all have the same start point but different endpoints and might have multiple waypoints.

The problem I'm having is that the API doesn't seem to give me any way to name each route, so when they come back asynchronously, I can't be sure which route belongs to which driver. It's true that each route has different addresses, but the DirectionsService response object gives me back slightly different addresses than I send -- "Des Plaines, IL" becomes "Des Plaines, IL, USA", for instance -- making it unreliable to compare those.

The API doesn't seem to let me send arbitrary strings with the request object to name them uniquely. So what can I do?

A code snippet that might help clarify what I'm doing:

$.getJSON(ajaxsource, function(data) {
    var darr = data.driver_info, // includes driver name, start and end addresses
        driver, start, end,
        waypts = [];
    for (var i=0,j=darr.length; i<j; i++) {
        if (driver==$.trim(darr[i][8])) { // same driver, next destination
            //  start = end;
            waypts.push({
                location: end,
                stopover: true });
        } else {
            waypts = [];
            driver = $.trim(darr[i][8]);
            start = $.trim(darr[i][4]);
        }
        end = $.trim(darr[i][2]);

        if (i+1==j || driver!=$.trim(darr[i+1][8])) { 
            var request = { // route object
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsService.route(request, function(response, status) {
                var legs = response.routes[0].legs;
                // console.log(response);
                for (var k=0; k<legs.length; k++) {
                    $('#results').append($('<li>').html("Driver " + driver + 
                        "<br>starts at " + legs[k].start_address + 
                        "<br>and drives " + legs[k].distance.text + 
                        "<br>to end at " + legs[k].end_address));
                }
            });
        };

    }; // end for
}); // end getJSON

That code will return all the route info as desired, but since it's asynchronous, the driver in each result is the name of the last driver listed in my data.driver_info array. What I need is to list the driver that should be associated with that particular route.

Upvotes: 0

Views: 1958

Answers (2)

Carl
Carl

Reputation: 7554

Set a var loc_driver = driver; within the loop so that you can have it local to the for loop, and then use that value in your callback rather than relying on the "global" (at least, relative to the entire getJSON call) value.

The callback to the directionsService has within scope variables from the for loop and the entire function(data){ ... }.

The problem is that driver changes with each pass of the for-loop, and your callback uses that "global" driver. If instead you set a variable that lives only within the scope of each for loop, and the callback relies on that variable, then problem solved.

EDIT: there may be some reference vs value issues, so how about declare somewhere convenient:

callbackFactory = function(driver) {
   return function(request, status) {
     var legs = response.routes[0].legs;
     console.log(response);
     for (var k=0; k<legs.length; k++) {
        $('#results').append($('<li>').html("Driver " + driver +
             "<br>starts at " + legs[k].start_address + 
             "<br>and drives " + legs[k].distance.text + 
             "<br>to end at " + legs[k].end_address));
     }
   };
};

and then in your control structure:

directionsService.route(request, callbackFactory(driver));

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92903

A little more debugging uncovered a solution -- the Google documentation didn't mention that the response object doesn't just contain a status and routes, but also a sub-object called ub which mirrors the request object I sent. Using that, I can compare addresses exactly to match routes to drivers.

Object
    routes: Array[1]
    status: "OK"
    ub: Object
        destination: "1234 Some Street, Antioch, IL"
        optimizeWaypoints: true
        origin: "2345 Anywhere Ave., Lake Forest, IL"
        travelMode: "DRIVING"
        waypoints: Array[0]
        __proto__: Object
    __proto__: Object

I added the following code inside my directionsService.route() callback:

var driver = '',
    end_ub = response.ub.destination;
for (var a=0,b=darr.length; a<b; a++) {
    if (darr[a][2]==end_ub) {
        driver = darr[a][8];
        break;
    };
};

Upvotes: 0

Related Questions