title: Use directions service of Google Maps API to show blue line for all routes
body: <pre><code>function placeDistanceMarkers(
   coordinates,
   in_between_distance,
   unit,
   departure_time
  ) {
   if (coordinates.length &lt; 2) {
     throw new Error(&quot;Invalid length of marker coordinates&quot;);
   }
  
   // the elements are the functions to be called with lat() and lng()
   let start_coord = coordinates[0],
     end_coord = coordinates[coordinates.length - 1];
   let distances = [];
   distances.push(0); // init
   let marker_index = 0;
  
   // start marker
   addMarker(
     new google.maps.LatLng(start_coord.lat(), start_coord.lng()),
     { lat: start_coord.lat(), lng: start_coord.lng() },
     ++marker_index,
     departure_time
   );
   //end marker
   addMarker(
     new google.maps.LatLng(end_coord.lat(), end_coord.lng()),
     { lat: end_coord.lat(), lng: end_coord.lng() },
     ++marker_index,
     departure_time
   );
  
   // calculate distances with the starting coord coordinates[0]
   for (let i = 1; i &lt; coordinates.length; i++) {
     let d = distance(
       { lat: start_coord.lat(), lng: start_coord.lng() },
       { lat: coordinates[i].lat(), lng: coordinates[i].lng() },
       &quot;miles&quot;
     );
     distances.push(d);
   }
  
   let start_distance = 0;
   for (let i = 0; i &lt; coordinates.length; i++) {
     if (distances[i] - start_distance &gt;= 20) {
       start_distance = distances[i];
       addMarker(
         new google.maps.LatLng(coordinates[i].lat(), coordinates[i].lng()),
         { lat: coordinates[i].lat(), lng: coordinates[i].lng() },
         ++marker_index,
         departure_time
       );
     }
   }
  }
  function displayRoute2(start, end, departure_time) {
   directionsService = new google.maps.DirectionsService();
   var request = {
     origin: start,
     destination: end,
     travelMode: &quot;DRIVING&quot;,
     provideRouteAlternatives: true,
   };
   directionsService.route(request, function (result, status) {
     if (status == &quot;OK&quot;) {
       console.log(result);
       try {
         //the directions result which contains multiple routes
         directionsResult = result;
         let n = directionsResult.routes.length;
         //by default , the map displays the first result directions
         directionsDisplay = new google.maps.DirectionsRenderer();
         directionsDisplay.setDirections(result);
         directionsDisplay.setMap(map);
         // place markers 
         for (let i = 0; i &lt; n; i++) {
           placeDistanceMarkers(
             [
               result.routes[0].legs[0].start_location,
               ...result[&quot;routes&quot;][i][&quot;overview_path&quot;],
               result.routes[0].legs[0].end_location,
             ],
             20,
             &quot;miles&quot;,
             departure_time
           );
         }
         fillRouteOptions();
       } catch (e) {
         console.log(e.toString());
       }
     }
   });
  }
  </code></pre>
  <p>Here is current map I display:
  <a href="https://i.stack.imgur.com/5auZW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5auZW.png" alt="enter image description here" /></a></p>
  <p>I use above two functions to create map below.
  Right now it only displays the blue line for route 0, I would like to have blue line for all the routes.
  I am trying to use directionsDisplay.setRouteIndex(i);  in the for loop, but this will only display blue line for the last route.   Thanks for any help!</p>