title: Display multiple routes on google map
body: <p>I am trying to show multiple routes on google map but It is showing only one. Can you please what I am doing wrong?</p>
  
  <p><code>&lt;div class="searchmap" style="float:left;margin-left:1%"  id="map"&gt;&lt;/div&gt;</code></p>
  
  <pre><code>var map          = null;
  var markerPoints = [];
  
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  function initialize() 
  {   
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    map = new google.maps.Map(document.getElementById("map"), {scrollwheel:false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl: false, center:new google.maps.LatLng(19.0759837, 72.87765590000004), zoom:13});
  
  
    directionsDisplay.setMap(map);
  }
  
  
  function calcRoute(flat, flng, tlat, tlng)
  {
      var start = new google.maps.LatLng(flat, flng);
      var end   = new google.maps.LatLng(tlat, tlng);     
  
      var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
  
      directionsDisplay = new google.maps.DirectionsRenderer({
          suppressMarkers: false,
          suppressInfoWindows: true
      });
      directionsDisplay.setMap(map);
  
      directionsService.route(request, function(result, status) {
          console.log(result);
  
          if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(result);
          }
      });
  } 
  
  calcRoute("19.210430", "72.843422", "19.109858", "72.878433");
  calcRoute("19.228977", "72.856812", "19.117302", "72.884041");
  </code></pre>
  
  <p>Can you please let me know what I am doing wrong?</p>