title: How to calculate the inverse route (A -> B and B -> A)?
body: <p>My code calculates the distance and duration between source and destination (A -&gt; B). I would like to include in the same calculating the inverse route (B -&gt; A).</p>
  <p>I need to click the &quot;Calc&quot; button to calculate the total distance (A-&gt; B) + (B-&gt; A).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function() {
              var campos_max = 8; 
              var x = 1; 
              $('#add_field').click (function(e) {
                      e.preventDefault();     //prevent new clicks
                      if (x &lt; campos_max) {
                              $('#lists').append('&lt;div class="divLista"&gt;\
                                      &lt;td width="80"&gt;Point 0'+ x +': &lt;/td&gt;&lt;td width="150"&gt;&lt;input type="text" placeholder="Point 0'+ x +'" class="points" id="waypoint'+ x +'"&gt; &lt;input type="button" value="-" class="remove_campo"&gt;&lt;/td&gt;&lt;/div&gt;');
                                      new google.maps.places.Autocomplete((document.getElementById('waypoint'+ x)),{types: ['geocode']});
                              x++;
                      }
              });
  
              // Remove div
              $('#lists').on("click",".remove_campo",function(e) {
                      e.preventDefault();
                      $(this).parent('div').remove();
                      x--;
              });
      });
      
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      var source, destination;
      var directionsDisplay;
  
      google.maps.event.addDomListener(window, 'load', function () {
              new google.maps.places.Autocomplete(document.getElementById('txtSource'));
              new google.maps.places.Autocomplete(document.getElementById('txtDestination'));
              directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
      });
          
      
      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(40.659036, -73.937796);
        var myOptions = {
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: chicago
        }
        map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
        directionsDisplay.setMap(map);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  
      function calcRoute() {
      
          source = document.getElementById("txtSource").value;
          destination = document.getElementById("txtDestination").value;
        
              var elem = document.getElementsByClassName( 'points' );
              var wayPoints = [];
              for (var i = 0; i &lt; elem.length; ++i) {
                  if (typeof elem[i].attributes.class !== "undfined") {
                      if(elem[i].attributes.class.value === "points"){
                          wayPoints.push({
                          location: elem[i].value,
                          stopover: true
                          });
                      }
                  }
              }
              
              var request = {
                  origin: source,
                  destination: destination,
                  waypoints: wayPoints,
                  optimizeWaypoints: true,
                  travelMode: google.maps.TravelMode.DRIVING
              };
              
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            // For each route, display summary information.
            for (var i = 0; i &lt; route.legs.length; i++) {
              var routeSegment = i + 1;   
            }
            computeTotalDistance(response);
          } else {
          }
        });
      }
  
      function computeTotalDistance(result) {
        var totalDist = 0;
        var totalTime = 0;
        var myroute = result.routes[0];
        for (i = 0; i &lt; myroute.legs.length; i++) {
          totalDist += myroute.legs[i].distance.value;
          totalTime += myroute.legs[i].duration.value;
        }
        totalDist = totalDist / 1000.
                      
          var dvDistance = document.getElementById("dvDistance");
          dvDistance.innerHTML = "";
      
          function timeConvert(time) { 
              seconds = time;
              minutes = Math.floor(seconds/60);
              hours = Math.floor(minutes/60);
              days = Math.floor(hours/24);
              hours = hours-(days*24);
              minutes = minutes-(days*24*60)-(hours*60);
              seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);
              return (days&gt;0?days + " dia ":"")  + (hours&gt;0?hours + " h ":"") + (minutes&gt;0?minutes + " min":"");
          }
      
        document.getElementById("total").innerHTML = "Distance: " + totalDist.toFixed(1).replace('.',',') + " km&lt;br&gt;Time: " + timeConvert(totalTime); 
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
  html, body {
      margin:0;
      font-family:"Segoe UI","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
      font-size:14px;
      height:100%;
  
  }
  .painelLateral{
      float:left;
      width:350px;
      height:100%;
      min-height:100%;
  }
  .dvMap{
      float:right;
      width:calc(100% - 350px);
      height:100%;
      min-height:100%;
  }
  
  .divLista{
      margin-bottom: 5px;
      }
  &lt;/style&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="http://maps.google.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"&gt;&lt;/script&gt;
  &lt;div class="painelLateral"&gt;
  &lt;form id="painel" name="painel"&gt;
    &lt;table width="350" border="0" cellspacing="5" cellpadding="0"&gt;
      &lt;tr&gt;
        &lt;td width="102"&gt;Source:&lt;/td&gt;
        &lt;td width="210"&gt;&lt;input type="text" placeholder="Source" id="txtSource" style="width: 200px" /&gt;&lt;/td&gt;
        &lt;td width="72"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="2"&gt;&lt;table width="300" border="0" cellspacing="5" cellpadding="0"&gt;
          &lt;tr&gt;&lt;/tr&gt;
        &lt;/table &gt;
          &lt;div id="lists" align="right"&gt;&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="button" id="add_field" value="+" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Destination:&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" placeholder="Destination" id="txtDestination"  style="width: 200px" /&gt;&lt;/td&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="button" value="Calc" onclick="calcRoute();" /&gt;&lt;/td&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
      &lt;div id="dvDistance"&gt;&lt;/div&gt;
      &lt;div id="directions_panel"&gt;&lt;/div&gt;
      &lt;div id="total"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="dvMap" id="dvMap"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>