Help with toggling traffic layer.

920 views
Skip to first unread message

Val

unread,
Apr 27, 2011, 12:41:48 PM4/27/11
to google-map...@googlegroups.com
Hello,
 
For now I am just playing with the google maps and the traffic layer. I would like to have a button which toggles the traffic layer. I figuered that code as simple as:
 
traffic.setMap( traffic.getMap() != null ? null : map );
 
should do the trick but apparently I am doing something wrong. It works only on the first click - removes the traffic and then I can no longer show it back again.
 
Please, help me with this.
 
Thank you!
Val
 
P.S.
Currently I have a sample page here but sooner or later I'll remove it, therefore I am also copying the code below:
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Toggle Traffic</title>
    <style type="text/css">
        html { height: 100%;}
        body { height: 100%; margin: 0px; padding: 0px; }
        #map { height: 600px; width: 600px; }
    </style>
</head>
<body>
    <button id="b" type="button">
        ToggleTraffic</button>
    <div id="map" class="map">
    </div>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener( window, 'load', init );
 
        function init() {
            var options = {
                    zoom: 7,
                    center: new google.maps.LatLng( 39.8333333, -98.5833333 ),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    overviewMapControl: false   // see http://code.google.com/apis/maps/documentation/javascript/forum.html?place=topic/google-maps-js-api-v3/YxDUmSzksqs
                };
            var map = new google.maps.Map( document.getElementById( "map" ), options );
            var traffic = new google.maps.TrafficLayer();
            traffic.setMap( map );
 
            google.maps.event.addDomListener(
                document.getElementById( 'b' ),
                'click', 
                function() {
                    traffic.setMap( traffic.getMap() === null ? map : null )
                } );
        }
    </script>
</body>
</html>

 

geoco...@gmail.com

unread,
Apr 27, 2011, 1:12:24 PM4/27/11
to Google Maps JavaScript API v3
On Apr 27, 9:41 am, Val <val.mela...@gmail.com> wrote:
> Hello,
>
> For now I am just playing with the google maps and the traffic layer. I
> would like to have a button which toggles the traffic layer. I figuered that
> code as simple as:
>
> > traffic.setMap( traffic.getMap() != null ? null : map );
>
> should do the trick but apparently I am doing something wrong. It works only
> on the first click - removes the traffic and then I can no longer show it
> back again.
>
> Please, help me with this.
>
> Thank you!
> Val
>
> P.S.
> Currently I have a sample page here <http://www.vtmelamed.com:880/map.htm>

That map won't load for me.

I suspect your map variable is not in the global scope where your
click listener runs.

-- Larry

> but sooner or later I'll remove it, therefore I am also copying the code below:
>
> > <!DOCTYPE html><html><head>
> >     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> >     <title>Toggle Traffic</title>
> >     <style type="text/css">
> >         html { height: 100%;}
> >         body { height: 100%; margin: 0px; padding: 0px; }
> >         #map { height: 600px; width: 600px; }
> >     </style></head><body>
> >     <button id="b" type="button">
> >         ToggleTraffic</button>
> >     <div id="map" class="map">
> >     </div>
> >     <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
> >     <script type="text/javascript">
> >         google.maps.event.addDomListener( window, 'load', init );
>
> >         function init() {
> >             var options = {
> >                     zoom: 7,
> >                     center: new google.maps.LatLng( 39.8333333, -98.5833333 ),
> >                     mapTypeId: google.maps.MapTypeId.ROADMAP,
> >                     overviewMapControl: false   // seehttp://code.google.com/apis/maps/documentation/javascript/forum.html?...
> >                 };

Pil

unread,
Apr 27, 2011, 1:26:13 PM4/27/11
to Google Maps JavaScript API v3
When the traffic layer is being set after the map tiles have been
loaded the traffic layer is only displayed after zooming in or out.

Looks like a bug to me.


On Apr 27, 6:41 pm, Val <val.mela...@gmail.com> wrote:
> Hello,
>
> For now I am just playing with the google maps and the traffic layer. I
> would like to have a button which toggles the traffic layer. I figuered that
> code as simple as:
>
> > traffic.setMap( traffic.getMap() != null ? null : map );
>
> should do the trick but apparently I am doing something wrong. It works only
> on the first click - removes the traffic and then I can no longer show it
> back again.
>
> Please, help me with this.
>
> Thank you!
> Val
>
> P.S.
> Currently I have a sample page here <http://www.vtmelamed.com:880/map.htm> but
> sooner or later I'll remove it, therefore I am also copying the code below:
>
> > <!DOCTYPE html><html><head>
> >     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> >     <title>Toggle Traffic</title>
> >     <style type="text/css">
> >         html { height: 100%;}
> >         body { height: 100%; margin: 0px; padding: 0px; }
> >         #map { height: 600px; width: 600px; }
> >     </style></head><body>
> >     <button id="b" type="button">
> >         ToggleTraffic</button>
> >     <div id="map" class="map">
> >     </div>
> >     <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
> >     <script type="text/javascript">
> >         google.maps.event.addDomListener( window, 'load', init );
>
> >         function init() {
> >             var options = {
> >                     zoom: 7,
> >                     center: new google.maps.LatLng( 39.8333333, -98.5833333 ),
> >                     mapTypeId: google.maps.MapTypeId.ROADMAP,
> >                     overviewMapControl: false   // seehttp://code.google.com/apis/maps/documentation/javascript/forum.html?...
> >                 };

Val

unread,
Apr 27, 2011, 1:33:08 PM4/27/11
to google-map...@googlegroups.com
The map and the traffic variables were in the closure of the event callback but just in case I'm wrong I modified the script to:
 
google.maps.event.addDomListener( window, 'load', init );
  map = null;
  traffic = null;
        function init() {
            var options = {
                    zoom: 7,
                    center: new google.maps.LatLng( 39.8333333, -98.5833333 ),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    overviewMapControl: false   // see http://code.google.com/apis/maps/documentation/javascript/forum.html?place=topic/google-maps-js-api-v3/YxDUmSzksqs
                };

            map = new google.maps.Map( document.getElementById( "map" ), options );
            traffic = new google.maps.TrafficLayer();
            traffic.setMap( window.map );
            google.maps.event.addDomListener(
                document.getElementById( 'b' ),
                'click',
                function() {
                    traffic.setMap( traffic.getMap() === null ? map : null )
                } );
        }
 
Still doesn't work...
 
Val

Val

unread,
Apr 27, 2011, 1:43:16 PM4/27/11
to google-map...@googlegroups.com
Yeah, I saw it and it really looks like a bug - thank you.
 
Actually I started with a lot more code than this. In the original code, when I click the button the canvas would get gray 
with the controls on top and only if I force repaint of the image somehow (zoom in/out or resize the map div) the correct
view would eventually show up...

Michael Geary

unread,
Apr 27, 2011, 1:59:13 PM4/27/11
to google-map...@googlegroups.com
The first version of your code was much better. :-) You understood scoping correctly; there's no need to move those variables to the global scope.

That said, I don't know what the problem is either. It certainly looks like you're making the right call when I stop and look at it in Firebug.

I suspect that Pil is right - it "looks like a bug". That comment was not sarcasm, just a bit unclear: it looks like it could be a bug in the *Maps API*, especially considering the overlay rendering changes in the latest version of the API.

Did you test it with V3.3 or 3.2? I would try those older versions to see what happens:


-Mike

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Nianwei Liu

unread,
Apr 27, 2011, 2:37:02 PM4/27/11
to Google Maps JavaScript API v3
Looks like another case of newer version API broke stuff. It's seems v
3.4 caused a lot of problems, and it's unclear in the change log
what's been done.

Val

unread,
Apr 27, 2011, 3:25:45 PM4/27/11
to google-map...@googlegroups.com
OK, I think it is official now: it's a bug!
 
I tried with v3.3 (and the previous version of my js code ;) and it works as expected (currently on-line).
 
Thanks everyone for the replies!
Val

Michael Geary

unread,
Apr 27, 2011, 3:40:59 PM4/27/11
to google-map...@googlegroups.com
Great!

While it's fresh in your mind, would you file a bug report in the issue tracker?


Thanks,

-Mike

Val

unread,
Apr 27, 2011, 4:20:14 PM4/27/11
to google-map...@googlegroups.com
 
Val
Reply all
Reply to author
Forward
0 new messages