Hide Traffic Layer...
2,825 views
Skip to first unread message
Michael Bentz
Jun 21, 2010, 5:31:14 PM6/21/10
to Google Maps JavaScript API v3
My apologies that I do not have this live online right now as I have
no method of doing so yet...
According to the API docs, hiding the traffic layer is done simply by
using "setMap(null)";
I have a toggle function that handles this:
function toggleTraffic (toggle, map) {
var trafficLayer = new google.maps.TrafficLayer();
if (toggle) {
trafficLayer.setMap(map);
} else {
alert("Should Work");
trafficLayer.setMap(null);
}
}
I get the alert "Should Work", but the traffic layer persists.
My entire code is here:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
var houston = new google.maps.LatLng(29.75, -95.37);
function TWControl(controlDiv, map) {
// Main Control DIV Padding
controlDiv.style.padding = '5px';
// Set CSS For Control UI
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'black';
controlUI.style.color = 'white';
controlUI.style.borderColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
// Append Div To controlDiv
controlDiv.appendChild(controlUI);
// Set CSS For Control UI Interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '14px';
controlText.style.paddingRight = '14px';
controlText.innerHTML = 'Traffic On';
// Append Div To controlUI
controlUI.appendChild(controlText);
// Setup click event listeners
google.maps.event.addDomListener(controlUI, 'click',
function() {
if (controlText.innerHTML == "Traffic On") {
controlText.innerHTML = "Traffic Off";
toggleTraffic(1, map);
} else if (controlText.innerHTML == "Traffic Off") {
controlText.innerHTML = "Traffic On";
toggleTraffic(0, map);
}
});
}
function toggleTraffic (toggle, map) {
var trafficLayer = new google.maps.TrafficLayer();
if (toggle) {
trafficLayer.setMap(map);
} else {
alert("Should Work");
trafficLayer.setMap(null);
}
}
function initialize () {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 9,
center: houston,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
var twControlDiv = document.createElement('DIV');
var twControl = new TWControl(twControlDiv, map);
map.controls[google.maps.ControlPosition.RIGHT].push(twControlDiv);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:400px"></div>
</body>
</html>
no method of doing so yet...
According to the API docs, hiding the traffic layer is done simply by
using "setMap(null)";
I have a toggle function that handles this:
function toggleTraffic (toggle, map) {
var trafficLayer = new google.maps.TrafficLayer();
if (toggle) {
trafficLayer.setMap(map);
} else {
alert("Should Work");
trafficLayer.setMap(null);
}
}
I get the alert "Should Work", but the traffic layer persists.
My entire code is here:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
var houston = new google.maps.LatLng(29.75, -95.37);
function TWControl(controlDiv, map) {
// Main Control DIV Padding
controlDiv.style.padding = '5px';
// Set CSS For Control UI
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'black';
controlUI.style.color = 'white';
controlUI.style.borderColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
// Append Div To controlDiv
controlDiv.appendChild(controlUI);
// Set CSS For Control UI Interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '14px';
controlText.style.paddingRight = '14px';
controlText.innerHTML = 'Traffic On';
// Append Div To controlUI
controlUI.appendChild(controlText);
// Setup click event listeners
google.maps.event.addDomListener(controlUI, 'click',
function() {
if (controlText.innerHTML == "Traffic On") {
controlText.innerHTML = "Traffic Off";
toggleTraffic(1, map);
} else if (controlText.innerHTML == "Traffic Off") {
controlText.innerHTML = "Traffic On";
toggleTraffic(0, map);
}
});
}
function toggleTraffic (toggle, map) {
var trafficLayer = new google.maps.TrafficLayer();
if (toggle) {
trafficLayer.setMap(map);
} else {
alert("Should Work");
trafficLayer.setMap(null);
}
}
function initialize () {
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 9,
center: houston,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
var twControlDiv = document.createElement('DIV');
var twControl = new TWControl(twControlDiv, map);
map.controls[google.maps.ControlPosition.RIGHT].push(twControlDiv);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:400px"></div>
</body>
</html>
geoco...@gmail.com
Jun 21, 2010, 6:11:44 PM6/21/10
to Google Maps JavaScript API v3
On Jun 21, 2:31 pm, Michael Bentz <mbbe...@gmail.com> wrote:
> My apologies that I do not have this live online right now as I have
> no method of doing so yet...
http://www.easypagez.com/hosting.html
> My apologies that I do not have this live online right now as I have
> no method of doing so yet...
-- Larry
Rossko
Jun 21, 2010, 6:39:44 PM6/21/10
to Google Maps JavaScript API v3
> I have a toggle function that handles this:
>
> function toggleTraffic (toggle, map) {
> var trafficLayer = new google.maps.TrafficLayer();
> if (toggle) {
> trafficLayer.setMap(map);
> } else {
> alert("Should Work");
> trafficLayer.setMap(null);
> }
> }
>
> I get the alert "Should Work", but the traffic layer persists.
Which layer? Every time you run that function, you create a new
>
> function toggleTraffic (toggle, map) {
> var trafficLayer = new google.maps.TrafficLayer();
> if (toggle) {
> trafficLayer.setMap(map);
> } else {
> alert("Should Work");
> trafficLayer.setMap(null);
> }
> }
>
> I get the alert "Should Work", but the traffic layer persists.
layer. Creating a new layer and immediately 'hiding' it, won't change
anything about any layer you may have created before.
pete
Jun 21, 2010, 8:16:15 PM6/21/10
to Google Maps JavaScript API v3
Hi Michael,
As Rossko said, you are creating a layer every time.
Instead, create the layer once, on initialize then toggle it.
Step 1 - Set it as a global
var trafficLayer;
Step 2 - Create the layer in your initialize() function
trafficLayer = new google.maps.TrafficLayer();
Step 3 - Remove the new layer reference from togglTraffic
//trafficLayer = new google.maps.TrafficLayer();
So simply put, you create the traffic layer on page load, but only
"set" it when you click your control
Hope this has helped
As Rossko said, you are creating a layer every time.
Instead, create the layer once, on initialize then toggle it.
Step 1 - Set it as a global
var trafficLayer;
Step 2 - Create the layer in your initialize() function
trafficLayer = new google.maps.TrafficLayer();
Step 3 - Remove the new layer reference from togglTraffic
//trafficLayer = new google.maps.TrafficLayer();
So simply put, you create the traffic layer on page load, but only
"set" it when you click your control
Hope this has helped
Michael Bentz
Jun 22, 2010, 10:08:45 AM6/22/10
to Google Maps JavaScript API v3
Thanks pete and Rossko! It was a dumb mistake on my part. I completely
overlooked the fact that it was creating a new layer each time.
Thanks again.
overlooked the fact that it was creating a new layer each time.
Thanks again.
Reply all
Reply to author
Forward
0 new messages