title: How to show real time traffic data for a particular route on maps
body: <p>I have implemented direction API to find out a route from source to destination using Google Maps V3 direction API in browser/JavaScript.</p>
  
  <p>Now I want to display traffic situation as shown in below snapshot (snapshot from google maps) in the route part only.</p>
  
  <p><a href="https://i.stack.imgur.com/HlQVl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HlQVl.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to do so with different polyline strokeColor for different level of traffic condition?</p>
  
  <p>If it is not possible using direction API or traffic layer, can I make use of the premium version of direction matrix or road API to implement this?</p>
  
  <p>Below is what I have done until now and my output accordingly:</p>
  
  <pre><code>  var map;
    var directionsService;
    var polyline;
    var directionsDisplay;
    function initMap() {
      directionsDisplay = new google.maps.DirectionsRenderer({
        polylineOptions:{
          strokeOpacity:1,
          strokeWeight:5,
          strokeColor: 'green'
        },
        draggable: true
      });
  
      directionsService = new google.maps.DirectionsService;
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: {lat: 37.77, lng: -122.447}
      });
  
      var trafficLayer = new google.maps.TrafficLayer();
      trafficLayer.setMap(map);
  
      directionsDisplay.setMap(map);
                 directionsDisplay.setPanel(document.getElementById('directionsPanel'));
  
      directionsDisplay.addListener('directions_changed', function() {
        DistanceOut(directionsDisplay.getDirections());
      });
      polyline = new google.maps.Polyline({
        map:map
      });
      calculateAndDisplayRoute(directionsService, directionsDisplay);
  
    }
  
    function calculateAndDisplayRoute(directionsService,    directionsDisplay) {
  
      directionsService.route({
        origin: 'Whitefield, Bangalore',
        destination: 'Indira nagar, Bangalore',
  
        provideRouteAlternatives: true,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(Date.now()),
          trafficModel: 'bestguess'
        },
        unitSystem: google.maps.UnitSystem.METRIC
  
      }, function(response, status) { console.log(response);
        if (status == 'OK') {
          directionsDisplay.setDirections(response);
          DistanceOut(response);
          changeStepColor(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }
  
    function DistanceOut(response){
      document.getElementById("travelDetail").innerHTML = "Distance:"+response.routes[0].legs[0].distance.text+
          "&lt;br&gt; Duration::"+response.routes[0].legs[0].duration.text+
          "&lt;br&gt; Duration in traffic::"+response.routes[0].legs[0].duration_in_traffic.text;
    }
  
    // Here I want to change the polyline color according to the traffic condition.
    // Can I? Or if any other way to do so?!
    function changeStepColor(res){
      var steps = res.routes[0].legs[0].steps;
  
      for(i=0; i&lt;steps.length; i++){
        if((steps[i].distance.value/steps[i].duration_in_traffic.value) &gt; 5) {
          //steps[i].polyline.strokeColor='blue';
          //directionsDisplay.setOptions({polylineOptions: {path: steps[i].path ,strokeColor: 'red'}});
        } else {
          //directionsDisplay.setOptions({polylineOptions: {path: steps[i].path ,strokeColor: 'yellow'}});
  
          //steps[i].polyline.strokeColor='red'
        }
      }
    }
  </code></pre>
  
  <p>Here is my Output snapshot:
  <a href="https://i.stack.imgur.com/ZojJj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZojJj.jpg" alt="enter image description here"></a></p>
  
  <p>I hope this helps you to understand my issue. Let me know if anything else is needed to understand my issue.</p>