Google MapsのAPI V3 TrafficLayerウィジェット

Question

Google Maps Traffic Widget

私は典型的なトラフィックを表示するには、私の埋め込まれたマップでは上の写真からウィジェットを表示したいです。しかし、私はこれのためのドキュメントを見つけることができないようです。これは私の現在のjavascriptコード

function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 17, 
    clickableIcons: false, 
    center: {lat: 34.04924594193164, lng: -118.24104309082031} 

}); 

var myMarker = new google.maps.Marker({ 
    position: {lat: 34.04924594193164, lng: -118.24104309082031}, 
    map: map, 
    title: 'myMarker', 
    draggable: false 
}); 

var trafficLayer = new google.maps.TrafficLayer(); 
trafficLayer.setMap(map); 
} 

Answer 1

正にあなたが望むものは公式文書では提供されていません。 あなたはこれが伝説の一部に応答し、トグル可能なトラフィック層を処理し、このtutorial

function initMap() { 
 

 
    var options = { 
 
    zoom: 13, 
 
    center: {lat: 34.04924594193164, lng: -118.24104309082031}, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}; 
 

 
var map = new google.maps.Map(document.getElementById('map-container'), options); 
 

 
//var trafficLayer = new google.maps.TrafficLayer(); 
 
//trafficLayer.setMap(map); 
 
    var controlDiv = document.createElement('DIV'); 
 
$(controlDiv).addClass('gmap-control-container') 
 
      .addClass('gmnoprint'); 
 
      
 
var controlUI = document.createElement('DIV'); 
 
$(controlUI).addClass('gmap-control'); 
 
$(controlUI).text('Traffic'); 
 
$(controlDiv).append(controlUI); 
 
      
 
var legend = '<ul>' 
 
      + '<li><span style="background-color: #30ac3e">&nbsp;&nbsp;</span><span style="color: #30ac3e"> &gt; 80 km per hour</span></li>' 
 
      + '<li><span style="background-color: #ffcf00">&nbsp;&nbsp;</span><span style="color: #ffcf00"> 40 - 80 km per hour</span></li>' 
 
      + '<li><span style="background-color: #ff0000">&nbsp;&nbsp;</span><span style="color: #ff0000"> &lt; 40 km per hour</span></li>' 
 
      + '<li><span style="background-color: #c0c0c0">&nbsp;&nbsp;</span><span style="color: #c0c0c0"> No data available</span></li>' 
 
      + '</ul>'; 
 
      
 
var controlLegend = document.createElement('DIV'); 
 
$(controlLegend).addClass('gmap-control-legend'); 
 
$(controlLegend).html(legend); 
 
$(controlLegend).hide(); 
 
$(controlDiv).append(controlLegend); 
 
      
 
// Set hover toggle event 
 
$(controlUI) 
 
    .mouseenter(function() { 
 
     $(controlLegend).show(); 
 
    }) 
 
    .mouseleave(function() { 
 
     $(controlLegend).hide(); 
 
    }); 
 
      
 
var trafficLayer = new google.maps.TrafficLayer(); 
 
      
 
google.maps.event.addDomListener(controlUI, 'click', function() { 
 
    if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) { 
 
     $(controlUI).addClass('gmap-control-active'); 
 
     trafficLayer.setMap(map); 
 
    } else { 
 
     trafficLayer.setMap(null); 
 
     $(controlUI).removeClass('gmap-control-active'); 
 
    } 
 
}); 
 
      
 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv); 
 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 
#map-container { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.gmap-control-container { 
 
    margin: 5px; 
 
} 
 
.gmap-control { 
 
    cursor: pointer; 
 
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3); 
 
    background-color: #FEFEFE; 
 
    border: 1px solid #A9BBDF; 
 
    border-radius: 2px; 
 
    padding: 0 6px; 
 
    line-height: 160%; 
 
    font-size: 12px; 
 
    font-family: Arial,sans-serif; 
 
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 
.gmap-control:hover { 
 
    border: 1px solid #678AC7; 
 
} 
 
.gmap-control-active { 
 
    background-color: -moz-linear-gradient(center top , #6D8ACC, #7B98D9); 
 
    background-color: #6D8ACC; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    border: 1px solid #678AC7; 
 
} 
 
.gmap-control-legend { 
 
    position: absolute; 
 
    text-align: left; 
 
    z-index: -1; 
 
    top: 20px; 
 
    right: 0; 
 
    width: 150px; 
 
    height: 66px; 
 
    font-size: 10px; 
 
    background: #FEFEFE; 
 
    border: 1px solid #A9BBDF; 
 
    padding: 10px; 
 
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); 
 
} 
 
.gmap-control-legend ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.gmap-control-legend li { 
 
    line-height: 160%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map-container"></div> 
 

 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script>