Googleマップ - APIを使用してその特定のルート上のトラフィックを検索して検索する方向を取得

Googleマップ方向識別子を使用しようとしています。交通情報Googleマップ - APIを使用してその特定のルート上のトラフィックを検索して検索する方向を取得

私は方向を取得しますが、特定の選択された経路の交通情報を取得しません。それは全体的なトラフィックを適用します。

html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     #floating-panel { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 25%; 
 
     z-index: 5; 
 
     background-color: #fff; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto','sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
     }

<div id="floating-panel"> 
 
    <b>Start: </b> 
 
    <select id="start"> 
 
     <option value="coimbatore, in">coimbatore</option> 
 
     <option value="tirupur, in">St Louis</option> 
 
     <option value="joplin, mo">Joplin, MO</option> 
 
     <option value="oklahoma city, ok">Oklahoma City</option> 
 
     <option value="amarillo, tx">Amarillo</option> 
 
     <option value="gallup, nm">Gallup, NM</option> 
 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
 
     <option value="winona, az">Winona</option> 
 
     <option value="kingman, az">Kingman</option> 
 
     <option value="barstow, ca">Barstow</option> 
 
     <option value="san bernardino, ca">San Bernardino</option> 
 
     <option value="los angeles, ca">Los Angeles</option> 
 
    </select> 
 
    <b>End: </b> 
 
    <select id="end"> 
 
     <option value="chicago, il">Chicago</option> 
 
     <option value="tirupur, in">tirupur</option> 
 
     <option value="joplin, mo">Joplin, MO</option> 
 
     <option value="oklahoma city, ok">Oklahoma City</option> 
 
     <option value="amarillo, tx">Amarillo</option> 
 
     <option value="gallup, nm">Gallup, NM</option> 
 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
 
     <option value="winona, az">Winona</option> 
 
     <option value="kingman, az">Kingman</option> 
 
     <option value="barstow, ca">Barstow</option> 
 
     <option value="san bernardino, ca">San Bernardino</option> 
 
     <option value="los angeles, ca">Los Angeles</option> 
 
    </select> 
 
    </div> 
 
    <div id="map"></div> 
 
    <script> 
 
     function initMap() { 
 
     var directionsService = new google.maps.DirectionsService; 
 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 15, 
 
      center: {lat:11.0203840, lng: 76.9160980} 
 
     }); 
 
     directionsDisplay.setMap(map); 
 

 
     var onChangeHandler = function() { 
 
      calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
     }; 
 
\t var trafficLayer = new google.maps.TrafficLayer(); 
 
     trafficLayer.setMap(map); 
 

 
     document.getElementById('start').addEventListener('change', onChangeHandler); 
 
     document.getElementById('end').addEventListener('change', onChangeHandler); 
 
     } 
 

 
     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
     directionsService.route({ 
 
      origin: document.getElementById('start').value, 
 
      destination: document.getElementById('end').value, 
 
      travelMode: 'DRIVING' 
 
     }, function(response, status) { 
 
      if (status === 'OK') { 
 
      directionsDisplay.setDirections(response); 
 
      } else { 
 
      window.alert('Directions request failed due to ' + status); 
 
      } 
 
     }); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"> 
 
    </script>

出典

2016-08-03 Creative Enemy