How do I link to google maps print directions using Html5 geolocation?

Question

I'm currently developing a site that uses html5 geolocation to get the location of the user and display the route on the map, so far so good. But now, I'd like to have three buttons ( walking, driving, transport) which will link to google maps print directions (ie. https://maps.google.com/maps?saddr=San+Francisco&daddr=Los+Angeles&z=7&pw=2 ) depending on the location of the user and kind of transport.

Any ideas on how to implement this?

Thanks.

Answer 1

The relevant Google Maps url paramaters are:

saddr
    source address
    any urlencoded address, or a lat/lng pair formatted as
       58+41.881N+152+31.324W

daddr
    destination address (same as saddr)

dirflg
    transportation directions type flag
    (character, optional)
        'r' = public transit
        'w' = walking
        'b' = bike
        defaults to car if omitted

Answer 2

Ok, here is the quick high level solution:

1. Use geolocation api to get the user location on success callback.
2. Create a new google map using the gmaps api, when making pass the user coords as center of the map. If this is a mobile type web app I recommend using the accuracy radius value you get back also and draw the circle... like the iphone map app.
3. There is a api call that google offers or you can created your own to get the route from user latlng, destination, travel method etc. .
4. Once the callback fires rebind the map to allow the user to see there position and the destination.
5. The directions object will also comeback with all sorts of data pertaining to the routes and legs.... decide how much of this you want to display and redraw map.

Note when you make the call to the api for directions you can specify what type travel mode to use among a few other things.

Also you should setup a method to track the user with geolocation and update the map center based on data coming back so the user can track their movements. I've done it with a setTimeOut and then animated the marker to the new location(Not sure if setTimeout is the cleanest solution).

Google Maps API with geolocation is fun!