Steve Steve - 3 months ago 43
Javascript Question

Adding layer to Google Map (Adding toggle for traffic layer)

I want to toggle the Google Maps traffic layer. I found this post: Adding Custom Control to Google Map (Adding toggle for traffic layer)

I have tried putting the DOM listener into various places in my code to no effect. Using Firebug I do not see any errors but the traffic layer does not toggle.

I was able to hard code in the traffic layer, so I know that it can work.

Here is my code:






Eyehike Hike Locator

</script> -->




<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>

Answer

There are two potential issues with your code:

  1. The map variable is local to the load function.
  2. The code that configures the trafficLayer is inside the bindInfoWindow function

code snippet:

var map;
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() {
  // initialize the global map variable
  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.

  trafficLayer = new google.maps.TrafficLayer();
  google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic);

}
google.maps.event.addDomListener(window, "load", load);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button id="trafficToggle">Toggle Traffic Layer</button>
<div id="map"></div>

Comments