How to add directions to map

[Rick]

I have been attempting to add bicycle directions to my existing google API map http://mobiiimaps.com/v1/map.htm

My goal is the following functionality: user searches for places, clicks marker to open infowindow, clicks bike icon to get directions from current location to that marker.

Using the HTML5 geolocation API I have the current location in a variable that I can place in the origin option. How do I pass the markers coordinates to the destination option for the request? How do set up the click event so that the bike icon, contained in div id="bike_directions", triggers the bicycle direction function.

What I have tried so far: I have followed the documentation (https://developers.google.com/maps/documentation/javascript/directions ) and examples (https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple), but my javascript code is getting so long that I am having difficulty figuring out where to place the code so that it actually functions. Just to get the directions working with simple strings queries, I have tried placing the following function outside the initialize function:

$(function() {

$("#bike_directions").click(function calcRoute() {

 var request = {

origin: "Los Angeles, CA",

destination: "San Francisco, CA",

travelMode: google.maps.TravelMode.BICYCLING

 };

 directionsService.route(request, function(result, status) {

if (status == google.maps.DirectionsStatus.OK) {

 directionsDisplay.setDirections(result);

}

 });

});

});

I declared the following as global variables:

var directionsDisplay;

var directionsService = new google.maps.DirectionsService(); 

and set the following just below the initialize function

directionsDisplay = new google.maps.DirectionsRenderer();

 directionsDisplay.setMap(map); 

This did not work. Any guidance would be appreciated. I tried asking at Stackoverflow but my question was lost in the sea of questions and i did not receive an answer.

Thanks

[Bost]

Hallo,
you have to iterate through the legs of the route and the steps of the legs to generate a polyline.
 As an example look at:
http://www.gas-tankstellen.de/routeCngLpgFinder/routeCngLpgFinder-en.html

In the source code look at routeMain.js and navigate to initialize() and find the line, where onClickRoute(); is called. Follow the calls of getRoute, directionsService.route(...), createRoutePoly(route);
The iteration is done in createRoutePoly(route);

/**
 *Creates the polyline of a route.
 *@param route the route object
 *@return {polyline,route distance in kms}
 */
function createRoutePoly(route){
    var legs=route.legs;
    var path=new Array();
    var steps, leg;
    var polylineLength=0.0;
    for(var i=0; i< legs.length; i++){
        leg=legs[i];
        polylineLength+=leg.distance.value;
        steps=leg.steps;
        for (var s=0; s<steps.length; s++){
            path=path.concat(steps[s].path);
        }
    }
    var polyOpts={
        map:map,
        path:path,
        strokeColor:"#ff0000",
        strokeOpacity:0.9,
        strokeWeight:2
    };
    var polyline=new google.maps.Polyline(polyOpts);
    return {
        polyline:polyline,
        polylineLength:polylineLength/1000.0
    };
}
Regards
BO