title: How to display alternative route using google map api
body: <p>I am using google map and i am bit of stuck at one point. i want to <strong>display alternative route</strong> for my source and destination point. currently i am using the code which is working perfectly and displaying correct result but the only the problem is that this code displaying only single route for my starting and destination path. </p>
  
  <p>Here is my <a href="http://jsfiddle.net/UpVyc/" rel="nofollow noreferrer">JSFIDDLE WORKING DEMO</a>  </p>
  
  <p>Here is <strong>sample code</strong> which i am using in jsfiddle demo link:  </p>
  
  <p><strong>HTML CODE:</strong>  </p>
  
  <pre><code>&lt;h1&gt;Calculate your route&lt;/h1&gt;
  &lt;form id="calculate-route" name="calculate-route" action="#" method="get"&gt;
    &lt;label for="from"&gt;From:&lt;/label&gt;
    &lt;input type="text" id="from" name="from" required="required" placeholder="An address" size="30" /&gt;
    &lt;a id="from-link" href="#"&gt;Get my position&lt;/a&gt;
    &lt;br /&gt;
  
    &lt;label for="to"&gt;To:&lt;/label&gt;
    &lt;input type="text" id="to" name="to" required="required" placeholder="Another address" size="30" /&gt;
    &lt;a id="to-link" href="#"&gt;Get my position&lt;/a&gt;
    &lt;br /&gt;
  
    &lt;input type="submit" /&gt;
    &lt;input type="reset" /&gt;
  &lt;/form&gt;  
  </code></pre>
  
  <p><strong>JS CODE:</strong>  </p>
  
  <pre><code>&lt;script&gt;
    function calculateRoute(from, to) {
      // Center initialized to Naples, Italy
      var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(40.84, 14.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      // Draw the map
      var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
  
      var directionsService = new google.maps.DirectionsService();
      var directionsRequest = {
        origin: from,
        destination: to,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC
      };
      directionsService.route(
        directionsRequest,
        function(response, status)
        {
          if (status == google.maps.DirectionsStatus.OK)
          {
            new google.maps.DirectionsRenderer({
              map: mapObject,
              directions: response
            });
          }
          else
            $("#error").append("Unable to retrieve your route&lt;br /&gt;");
        }
      );
    }
  
    $(document).ready(function() {
      // If the browser supports the Geolocation API
      if (typeof navigator.geolocation == "undefined") {
        $("#error").text("Your browser doesn't support the Geolocation API");
        return;
      }
  
      $("#from-link, #to-link").click(function(event) {
        event.preventDefault();
        var addressId = this.id.substring(0, this.id.indexOf("-"));
  
        navigator.geolocation.getCurrentPosition(function(position) {
          var geocoder = new google.maps.Geocoder();
          geocoder.geocode({
            "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
          },
          function(results, status) {
            if (status == google.maps.GeocoderStatus.OK)
              $("#" + addressId).val(results[0].formatted_address);
            else
              $("#error").append("Unable to retrieve your address&lt;br /&gt;");
          });
        },
        function(positionError){
          $("#error").append("Error: " + positionError.message + "&lt;br /&gt;");
        },
        {
          enableHighAccuracy: true,
          timeout: 10 * 1000 // 10 seconds
        });
      });
  
      $("#calculate-route").submit(function(event) {
        event.preventDefault();
        calculateRoute($("#from").val(), $("#to").val());
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>you can see in the demo when you enter starting point and destination point it will give you single route accordingly but i need to <strong>display alternative route</strong> as well in the map.</p>
  
  <p>Is there any way we can choose and display a route between the given options according to the 'distance' or the 'duration in traffic'?</p>
  
  <p>Thanks in advance for your help and much appreciated</p>