return directions from directionsService

1,300 views
Skip to first unread message

Seth

unread,
Jun 9, 2010, 2:06:48 PM6/9/10
to Google Maps JavaScript API v3
So I am working with V3 and I'm trying to calculation the driving time
between two points (latlng). I already have the distance and I can get
the driving time using the following code:

function getDrivingTime(start, end) {
var response;
var request = {
origin : start,
destination : end,
travelMode : google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
alert(response.routes[0].legs[0].duration.text);
}
});
}


BUT there's no way to actually return a value within the route method.
You can't even assign values outside of it, so I have no way of
returning that string that has the driving time inside of it... I'd
like to do this:

function getDrivingTime(start, end) {
...
if (status == google.maps.DirectionsStatus.OK) {
return response.routes[0].legs[0].duration.text;
...
}

but it never returns a value. I'm so confused. How can I get the
driving time or duration using the GoogleMaps api?

geoco...@gmail.com

unread,
Jun 9, 2010, 2:48:58 PM6/9/10
to Google Maps JavaScript API v3
You can't return a response from an asynchronous callback function.
But you can store the return value in a global variable or display it
in a <div> on your page. You need to do whatever you need to do with
it inside the callback function (where you have your alert).

What do you want to do with the returned value?

-- Larry

William

unread,
Jun 9, 2010, 4:26:18 PM6/9/10
to Google Maps JavaScript API v3
On Jun 10, 4:06 am, Seth <seth.va...@gmail.com> wrote:
> How can I get the
> driving time or duration using the GoogleMaps api?

because the driving directions service is asynchronous, you will have
to modify your own function to become asynchronous. The following
shows the difference between synchronous and asynchronous function
usage, where the drivingTime function is being used to determine if a
route takes more than one hour:

------ SYNCHRONOUS FUNCTION USAGE ------

function getDrivingTime(start, end) {
...
...
return time;
}

var time = getDrivingTime(start, end);

if (time > 3600) {
// more than one hour, try another route
}

------ ASYNCHRONOUS FUNCTION USAGE ------

function getDrivingTime(start, end, responseHandler) {
....
....
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
responseHandler(response.routes[0].legs[0].duration.value);
} else {
responseHandler();
}
});
}


getDrivingTime(start, end, function(time) {
if (time > 3600) {
// more than one hour, try another route
}

});

------------------------------------------

Juan Bosco Lopez Jasso

unread,
Jun 9, 2010, 5:46:37 PM6/9/10
to google-map...@googlegroups.com
sorry about this post, I found the problem. I was using google.gear as a first resource to get the user location, rather than using google.loader.ClientLocation.

I don't understand the problem, but I deleted google.gear and now is working.

Thanks


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


Message has been deleted

Seth

unread,
Jun 10, 2010, 12:58:42 AM6/10/10
to Google Maps JavaScript API v3
Okay, nevermind, it's still not working:

$.get(searchURL, function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new
google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
directionsService.route(request, function(response,
status) {
if (status == google.maps.DirectionsStatus.OK) {
var content = '<div style="overflow:hidden; width:350px;height:
100px;">'+
'<strong>'+markers[i].getAttribute("name")+'</strong>'+
'<hr />'+
'<p><strong>'+markers[i].getAttribute("name")+'</strong>, is
<strong>'+markers[i].getAttribute("distance")+' miles</strong> from
your current location.<hr />'+
'total distance: <strong>'+markers[i].getAttribute("distance")+'
mi</strong>&nbsp;&nbsp;|&nbsp;&nbsp;driving time:
<strong>'+response.routes[0].legs[0].duration.text+'</strong>'+
'</p>'+
'</div>';

addMarkerAndInfoWindow(latlng','mouseover',content,true);
});
}

....

i'm getting 'can't call method getAttribute on undefined' now. But
markers is defined, and it works fine without this directions call.

On Jun 9, 9:53 pm, Seth <seth.va...@gmail.com> wrote:
> Thanks Larry! That was the problem! I want to display the driving time
> inside an infoWindow
>
> On Jun 9, 2:48 pm, "geocode...@gmail.com" <geocode...@gmail.com>

Seth

unread,
Jun 10, 2010, 1:02:08 AM6/10/10
to Google Maps JavaScript API v3
I think it might have something to do with the loop, but how do i
solve that?

On Jun 10, 12:58 am, Seth <seth.va...@gmail.com> wrote:
> Okay, nevermind, it's still not working:
>
>         $.get(searchURL, function(data) {
>                 var markers = data.documentElement.getElementsByTagName("marker");
>                 for (var i = 0; i < markers.length; i++) {
>                         var latlng = new
> google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(ma rkers[i].getAttribute("lng")));

William

unread,
Jun 10, 2010, 8:07:32 PM6/10/10
to Google Maps JavaScript API v3
On Jun 10, 3:02 pm, Seth <seth.va...@gmail.com> wrote:
> I think it might have something to do with the loop, but how do i
> solve that?
>
the loop looks something like:
-----------------------------
for (var i = 0; i < markers.length; i++) {
directionsService.route(request, function(response, status) {
var content = markers[i].getAttribute("name");
});
}
-----------------------------
which means the loop will send a directions service request for all
markers before any response is received from google. If there are 10
markers, there will be 10 almost simultaneous directions requests,
none of which has yet responded.

At the time when the first response is received, the loop variable "i"
will equal markers.length, and markers[markers.length] is undefined.

To fix this you need to get closure on a variable, so the inner
function can have access to it without it changing in the meantime.

You could try a loop that calls a function with a single marker:

-----------------------------
for (var i = 0; i < markers.length; i++) {
getDirections(start, markers[i]);
}

function getDirections(start, marker) {

var latlng = new google.maps.LatLng(
parseFloat(marker.getAttribute("lat")),
parseFloat(marker.getAttribute("lng")));

var request = {
origin : start,
destination : latlng,
travelMode : google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
var content = marker.getAttribute("name");
// set up info window etc
});
}
-----------------------------
Reply all
Reply to author
Forward
0 new messages