-1
Google Mapsトラフィックレイヤーを切り替えたいと思います。私はこのポストを見つけました：Adding Custom Control to Google Map (Adding toggle for traffic layer)Googleマップにレイヤーを追加する（トラフィックレイヤのトグルを追加する）
DOMリスナーを私のコードのさまざまな場所に置いてみましたが効果がありません。 Firebugを使用するとエラーは表示されませんが、トラフィック層は切り替えられません。
私はトラフィック層でハードコードできましたので、それが動作することがわかります。ここで
は私のコードです： Eyehikeハイキングロケータ < /スクリプト> - >
<script type="text/javascript">
var m_icon;
var m_shadow;
var mrk_id;
var thumnbnail;
var trafficLayer;
function toggleTraffic(){
if(trafficLayer.getMap() == null){
//traffic layer is disabled.. enable it
trafficLayer.setMap(map);
} else {
//traffic layer is enabled.. disable it
trafficLayer.setMap(null);
}
}
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.50, -115.00),
zoom: 6,
mapTypeId: 'hybrid'
}); // The higher the zoom number, the more detailed the map.
// var trafficLayer = new google.maps.TrafficLayer();
// trafficLayer.setMap(map);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("marker_php_07_16.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var rank = markers[i].getAttribute("rank");
var mileage = markers[i].getAttribute("mileage");
var permalink = markers[i].getAttribute("permalink");
var photolink = markers[i].getAttribute("photolink");
var routelink = markers[i].getAttribute("routelink");
var image_thumb = markers[i].getAttribute("thumbnail");
if(rank > 0 && rank < 10) {
iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png';
iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png';
m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/' + type + rank + '.png';
m_shadow = 'http://www.google.com/mapfiles/shadow50.png';
}
else {
iconImageOverUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';
iconImageOutUrl = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';
m_icon = 'http://www.eyehike.com/modules/hikelocator/icons/blue_.png';
m_shadow = 'http://www.google.com/mapfiles/shadow50.png';
};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: m_icon,
shadow: m_shadow,
title: name,
zIndex: mrk_id,
optimized: false,
html: "<div style='font-size:12px';width: 400px; height: 200px'><b>" + name
+ "</b></br><a href=\"" + photolink + "\" TARGET=blank><img src=\"" + image_thumb + "\" height=108 width=144 vspace=2 border=4 align=left></a>"
+ address
+ '</br>Difficulty (1-5) : '
+ rank
+ '. Mileage: '
+ mileage
+ " miles.</br>Trail review at: "
+ "<a href=\"" + permalink + "\" TARGET=blank>www.eyehike.com</a> <br/>"
+ "<a href=\"" + photolink + "\" TARGET=blank>See pictures of the hike.</a><br/>"
+ "<a href=\"" + routelink + "\" TARGET=blank>Topograhic map.</a>"
+ "</div>"
});
bindInfoWindow(marker, map, infoWindow);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(this.html);
infoWindow.open(map, this);
// google.maps.event.addDomListener(window, 'load', load);
});
trafficLayer = new google.maps.TrafficLayer();
google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onload="load()">
<button id="trafficToggle">Toggle Traffic Layer</button>
<div id="map" style="width: 900px; height: 600px">
</div>
</body>
</html>
私はあなたのあたりの私のコードを修正するための時間今夜を持っていました提案やもちろんそれは動作します。私の最初の間違いは、あなたがそれを指摘した時点で明らかです。 bindinfowindowについてのもう一つはもっと勉強する必要があるので、もっとうまくいく方法を理解することができます。 – Steve