Multiple Travel Modes To Render One Map Using Google Maps Api
I have a 3 legged trip with two different travel types. Because of the two different travel types I used 3 requests and specified the travel type for each request. App.directionsSe
Solution 1:
As requested an example using multiple DirectionsRenderer-instances(AFAIK there is no limit for the used instances):
vargoo=google.maps,map=newgoo.Map(document.getElementById('map-canvas'), {
center:newgoo.LatLng(52.52, 13.40),
zoom:10
}),App= {
map:map,
bounds:newgoo.LatLngBounds(),
directionsService:newgoo.DirectionsService(),
directionsDisplay1:newgoo.DirectionsRenderer({
map:map,
preserveViewport:true,
polylineOptions: {
strokeColor:'red'
}
}),
directionsDisplay2:newgoo.DirectionsRenderer({
map:map,
preserveViewport:true,
polylineOptions: {
strokeColor:'blue'
}
}),
directionsDisplay3:newgoo.DirectionsRenderer({
map:map,
preserveViewport:true,
polylineOptions: {
strokeColor:'yellow'
}
})
},startLeg= {
origin:'Rome',
destination:'Paris',
travelMode:goo.TravelMode.DRIVING
},middleLeg= {
origin:'Paris',
destination:'Berlin',
travelMode:goo.TravelMode.TRANSIT
},endLeg= {
origin:'Berlin',
destination:'Buxtehude',
travelMode:goo.TravelMode.BICYCLING
};App.directionsService.route(startLeg,function(result,status) {
if(status==google.maps.DirectionsStatus.OK) {
App.directionsDisplay1.setDirections(result);App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
}
});App.directionsService.route(middleLeg,function(result,status) {
if(status==google.maps.DirectionsStatus.OK) {
App.directionsDisplay2.setDirections(result);App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
}
});App.directionsService.route(endLeg,function(result,status) {
if(status==google.maps.DirectionsStatus.OK) {
App.directionsDisplay3.setDirections(result);App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
}
});
Demo(including instructions-panel): http://jsfiddle.net/doktormolle/y6xEP/
Note: my example uses adresses, it will not result in a continuous route. To get a continuous route with adresses you must send the requests one by one and use the destination-LatLng of the previous response as origin for the next request
Post a Comment for "Multiple Travel Modes To Render One Map Using Google Maps Api"