title: Google Maps Directions API - displaying alternate routes on button click
body: <p>how do I change the currently displayed route on a Google map on button click? Currently I am able to show only the primary route that is being returned. I am also able to loop through all the routes that was returned by the API. I just can't seem to find the way to change display between the routes that I have. Below is what I have so far.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Google Maps API Implementation&lt;/title&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var directionsDisplay = new google.maps.DirectionsRenderer();
          var directionsService = new google.maps.DirectionsService();
          var validRoutes = [];
  
          function initialize() {
  
              // ----- MAP SETUP ----- //
              var pierLocation = new google.maps.LatLng(14.6023936,120.9591289);
              var destinationLat = 14.60540879665969; // Sample data only
              var destinationLong = 120.9795238; // Sample data only
              var destinationLocation = new google.maps.LatLng(destinationLat,destinationLong);
  
              var mapProperties = {
                  center:pierLocation,
                  zoom:15,
                  mapTypeId:google.maps.MapTypeId.ROADMAP
              };
  
              var map = new google.maps.Map(document.getElementById("googleMap"),mapProperties);
  
              directionsDisplay.setMap(map);
              calculateRoutes(pierLocation, destinationLocation);
  
          }
  
          function calculateRoutes(pierLocation, destinationLocation) {
              var request = {
                  origin: pierLocation,
                  destination: destinationLocation,
                  travelMode: 'DRIVING',
                  provideRouteAlternatives: true
              };
              directionsService.route(request, function(result, status) {
                  if (status === 'OK') {
                      directionsDisplay.setDirections(result);
                      var summaryPanel = document.getElementById('directions-panel');
                      summaryPanel.innerHTML = '';
  
                      for (var x=0; x&lt;result.routes.length; x++) {
  
                          new google.maps.DirectionsRenderer({
                              map: googleMap,
                              directions: result,
                              routeIndex: x
                          });
  
                          summaryPanel.innerHTML += '&lt;hr&gt;&lt;br&gt;&lt;b&gt; Route ' + (x+1) + ':&lt;br&gt;';
                          var route = result.routes[x];
                          for (var y=0; y&lt;route.legs.length; y++) {
                              var routeSegment = y + 1;
  
                              summaryPanel.innerHTML += route.legs[y].start_address + ' to ';
                              summaryPanel.innerHTML += route.legs[y].end_address + '&lt;br&gt;';
                              summaryPanel.innerHTML += route.legs[y].distance.text + '&lt;br&gt;&lt;br&gt;';
  
                              var steps = route.legs[y].steps;
                              for (var z=0; z&lt;steps.length; z++) {
                                  var nextSegment = steps[z].path;
                                  summaryPanel.innerHTML += "&lt;li&gt;" + steps[z].instructions;
  
                                  var dist_dur = "";
                                  if (steps[z].distance &amp;&amp; steps[z].distance.text) dist_dur += steps[z].distance.text;
                                  if (steps[z].duration &amp;&amp; steps[z].duration.text) dist_dur += "&amp;nbsp;"+steps[z].duration.text;
                                  if (dist_dur != "") {
                                  summaryPanel.innerHTML += "("+dist_dur+")&lt;br /&gt;&lt;/li&gt;";
                                  } else {
                                  summaryPanel.innerHTML += "&lt;/li&gt;";
                                  }
  
                              }
  
                              summaryPanel.innerHTML += "&lt;br&gt;";
                          }
                      }
                  }
                   else {
                      window.alert('Directions request failed due to ' + status);
                      }
              });
          }
  
          google.maps.event.addDomListener(window, 'load', initialize);
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="googleMap" style="width:500px;height:380px;"&gt;&lt;/div&gt;&lt;br&gt;
      &lt;label id="directions-panel"&gt;&lt;/label&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/6Dq1I.png" rel="nofollow">Here is a screenshot</a>.</p>
  
  <p>Thanks in advance!!</p>