Google Maps API : multiple direction/route on same map

Question

I have a problem displaying several routes on the same Google map.

I have a position list that I get from my controller (in this form).

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
     0:
     arriveeLat: 48.784
     arriveeLng: 2.40735
     departLat: 48.9016
     departLng: 2.29873

I would like to make all the routes are displayed on the same map. Currently, only one is displayed (the last one probably)

var map;
  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
    directionsDisplay.setMap(map);



  var listPos = <?php echo json_encode($listPos); ?>;

  for (var i = 0; i < listPos.length; i++) {

    var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
    var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);

    calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint);

  }

}


  function calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint) {
    directionsService.route({
      origin: startPoint,
      destination: endPoint,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {

        directionsDisplay.setDirections(response);
      } else {
        window.alert('Impossible d afficher la route ' + status);
      }
    });
  }

Answer 1

If you want to display multiple responses from the directionsService on a Google Maps Javascript API v3 map, you need to create a DirectionsRenderer for each route you want displayed:

for (var i = 0; i < listPos.length; i++) {
  var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
  var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);
  var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
  calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint);
}

(Note: if you want to do anything with the routes later, like hide them, you will need to keep references to the DirectionRenderer objects for later use).

proof of concept fiddle

code snippet:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<div id="output"></div>
<div id="map"></div>
<script>
  var map;

  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });

    var listPos = [{
        arriveeLat: 48.784,
        arriveeLng: 2.2743419,
        departLat: 48.9016,
        departLng: 2.29873
      },
      {
        arriveeLat: 48.8245306,
        arriveeLng: 2.40735,
        departLat: 48.799815,
        departLng: 2.257289
      },
    ];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < listPos.length; i++) {

      var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
      var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);
      var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        preserveViewport: true
      });
      calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint, bounds);
    }

  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint, bounds) {
    directionsService.route({
      origin: startPoint,
      destination: endPoint,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        bounds.union(response.routes[0].bounds);
        map.fitBounds(bounds);
      } else {
        window.alert('Impossible d afficher la route ' + status);
      }
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>