title: Google Maps JavaScript API - Show INACTIVE alternative routes in one color, ACTIVE alternative route in another
body: <p>I am using the Google Maps JavaScript API and am providing directions with alternative routes.</p>
  
  <p>I would like to display the INACTIVE alternative routes in a gray color, and the current ACTIVE route in a neon green color.</p>
  
  <p>How can I target the inactive and active route states and control their colors?</p>
  
  <p>I've been able to change the alternative route colors using <a href="https://stackoverflow.com/questions/32831558/google-map-alternative-roads-show-with-different-colour">Geocodezip's example</a> but now I need to target inactive and active states.</p>
  
  <p><a href="https://www.google.com/maps/dir/Sacramento+Convention+Center,+J+Street,+Sacramento,+CA/Make+Fish+Poke+%26+Sushi+Burrito,+1801+L+St+%2370,+Sacramento,+CA+95814/@38.5769404,-121.4874807,17z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x809ad0d74b3744fd:0x6a3c5329cc42bc7f!2m2!1d-121.4880673!2d38.5783564!1m5!1m1!1s0x809ad0db9f66fd3d:0xe5143f8b40e02645!2m2!1d-121.4825168!2d38.5751145" rel="nofollow noreferrer">Here's an example of the functionality I'm going for</a></p>
  
  <pre><code>for (var j = 0; j &lt; response.routes.length; j++) {
      var path = new google.maps.MVCArray();
      polyArray.push(new google.maps.Polyline({
          map: map,
          strokeColor: colors[j],
          strokeOpacity: 1.0,
          strokeWeight: 5
      }));
  
      polyArray[polyArray.length - 1].setPath(path);
      for (var i = 0, len = response.routes[j].overview_path.length; i &lt; len; i++) {
          path.push(response.routes[j].overview_path[i]);
          }
      }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Directions service&lt;/title&gt;
      &lt;style&gt;
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #map {
          height: 100%;
        }
        #floating-panel {
          position: absolute;
          top: 10px;
          left: 25%;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
          text-align: center;
          font-family: 'Roboto','sans-serif';
          line-height: 30px;
          padding-left: 10px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="floating-panel"&gt;
      &lt;b&gt;Start: &lt;/b&gt;
      &lt;select id="start"&gt;
        &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
        &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
        &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
        &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
        &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
        &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
        &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
        &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
        &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
        &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
        &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
        &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
      &lt;/select&gt;
      &lt;b&gt;End: &lt;/b&gt;
      &lt;select id="end"&gt;
        &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
        &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
        &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
        &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
        &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
        &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
        &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
        &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
        &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
        &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
        &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
        &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
      &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
      
          var polyArray = [];
      var colors;
  
      function initMap() {
          
          polyArray = [];
          colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
          
          var directionsService = new google.maps.DirectionsService;
          var directionsDisplay = new google.maps.DirectionsRenderer;
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {lat: 41.85, lng: -87.65}
          });
          directionsDisplay.setMap(map);
  
          var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          document.getElementById('start').addEventListener('change', onChangeHandler);
          document.getElementById('end').addEventListener('change', onChangeHandler);
        }
  
        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          directionsService.route({
            origin: document.getElementById('start').value,
            destination: document.getElementById('end').value,
            travelMode: 'DRIVING',
            provideRouteAlternatives: true
          }, function(response, status) {
            if (status === 'OK') {
            for (var j = 0; j &lt; response.routes.length; j++) {
                  var path = new google.maps.MVCArray();
                  polyArray.push(new google.maps.Polyline({
                     map: map,
                     strokeColor: colors[j],
                     strokeOpacity: 1.0,
                     strokeWeight: 5
                  }));
                  polyArray[polyArray.length - 1].setPath(path);
                  for (var i = 0, len = response.routes[j].overview_path.length; i &lt; len; i++) {
                      path.push(response.routes[j].overview_path[i]);
                  }
              }
              directionsDisplay.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }
      &lt;/script&gt;
      &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;callback=initMap"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>