title: Google Maps API how to add current traffic conditions on routes
body: <p>Any help would be great thank you in advance.</p>
  
  <p>I have code that display main route and alternative route, however I'm trying to display traffic conditions of the route for example:</p>
  
  <p>if you go to maps and directions
  they will show red or yellow lines on your route. This is determined by traffic conditions. Is there a way to show traffic conditions on the map?</p>
  
  <p>I know theirs a traffic condition service, however it shows the traffic of the area. I just need the traffic on the route.</p>
  
  <p>my code</p>
  
  <pre><code>var lontLatObejct = sharedProperties.getString();           
          var myOptions = {
              zoom: 10,
              center: new google.maps.LatLng(lontLatObejct.strLocLatitude, lontLatObejct.strLocLongitude),
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: false
          };
          var mapObject = new google.maps.Map(document.getElementById("divMap"), myOptions);
  
          var mapCanvas = document.getElementById('divMap');
          var start = document.getElementById('txtStartingAddress').value.toString();
          var end = document.getElementById('txtEndingAddress').value.toString();
          var request = {
              origin: start,
              destination: end,
              provideRouteAlternatives: true,
              travelMode: google.maps.DirectionsTravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC
          };
  
  
          directionsDisplay.setMap(mapObject);
          directionsDisplay.setPanel(document.getElementById("divDirectionsPanel"));
  
          directionsService.route(
              request,
              function (response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      for (var i = 0, len = response.routes.length; i &lt; len; i++) {                       
                          switch(i){
                              case 0:
                                  new google.maps.DirectionsRenderer({
                                      map: mapObject,
                                      directions: response,
                                      routeIndex: i,
                                      draggable: true
                                  });
                                  break;                              
                              default:
                                  new google.maps.DirectionsRenderer({
                                      map: mapObject,
                                      directions: response,
                                      routeIndex: i,
                                      draggable: true,
                                      polylineOptions: { strokeColor: '#666666', strokeWeight: 6, strokeOpacity: .7 },
                                      suppressMarkers: true,                              
                                  });
                          }                       
                      }
                      directionsDisplay.setDirections(response);
  
                  } else {
  
                  }
              }
          );
  </code></pre>