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
Am Dienstag, 27. November 2012 02:44:42 UTC+1 schrieb 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
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-maps-js-api-v3/-/trRiGU6Ym9oJ.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
