Multiple travel modes to render one map using google maps API

Question

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.directionsService.route(startLeg, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        App.directionsDisplay1.setDirections(result);
      }
    }); 
App.directionsService.route(middleLeg, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        App.directionsDisplay2.setDirections(result);
      }
    });
App.directionsService.route(endLeg, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        App.directionsDisplay3.setDirections(result);
      }

Is it possible to render all three sets of results on the map?

Just to let you know, if you figure this out, I will use your app over Google's every day of my life. — C. Warren Dale, Apr 07 '14 at 21:00
of course it is possible when you use a separate DirectionsRenderer-instance for each leg — Dr.Molle, Apr 07 '14 at 21:33
@Dr.Molle I am using separate DirectionsRendere-instances for each. The first route is displayed on the map. Do you have any example code? — user2954587, Apr 07 '14 at 23:46

score 7 · Accepted Answer · edited Mar 28 '17 at 08:03

As requested an example using multiple DirectionsRenderer-instances(AFAIK there is no limit for the used instances):

var goo = google.maps,
    map = new goo.Map(document.getElementById('map-canvas'), {
      center: new goo.LatLng(52.52, 13.40),
      zoom: 10
    }),
    App = {
      map: map,
      bounds: new goo.LatLngBounds(),
      directionsService: new goo.DirectionsService(),
      directionsDisplay1: new goo.DirectionsRenderer({
        map: map,
        preserveViewport: true,
        polylineOptions: {
          strokeColor: 'red'
        }
      }),
      directionsDisplay2: new goo.DirectionsRenderer({
        map: map,
        preserveViewport: true,
        polylineOptions: {
          strokeColor: 'blue'
        }
      }),
      directionsDisplay3: new goo.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

Multiple travel modes to render one map using google maps API

1 Answers1

Linked