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