#1) Remove the function toggleLayer definition that you have inside of initialize function, you only need it defined once, outside of the init function. #2)remove references to "var" inside of the init function. Even though you did the right thing by defining those variables outside of the function, when you put "var" in the function again, it is redefining a locally scoped variable with the same name. By removing "var" inside of the init function on variables that were already defined, you are keeping them in "global" scope. #3)Add "var map;" to where you are initting the other variables, you will need the map in global scope in order for the toggleLayer function to work correctly.
On May 10, 6:16 pm, Jack Berberette <[email protected]> wrote: > Thanks for the response Jason, > > I just gave it a try but the toggle doesn't work. Her's the code did I mess > up setting the variables? Also I'm not sure if I set the toggleLayer code > in the right spot: > > function toggleLayer(layer) { > if (layer.getMap()) { > layer.setMap(null); > } else { > layer.setMap(map); > } > } > > Here's the code for the page: > > <html> > <head> > <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> > <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> > <title>VIPER Traffic and Hazmat LIVE</title> > <script type="text/javascript" > src="http://maps.google.com/maps/api/js?sensor=true";></script> > <script type="text/javascript"> > var initialLocation; > var statepolice = new google.maps.LatLng(37.502168, -77.542212); > var Hazmat; > var RichmondTraffic; > var StateShelters; > var trafficLayer; > > function initialize() { > var myOptions = { > zoom: 14, > mapTypeId: google.maps.MapTypeId.ROADMAP > }; > var map = new google.maps.Map(document.getElementById("map_canvas"), > myOptions); > var Hazmat = new > google.maps.KmlLayer('https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx'); > Hazmat.setMap(map); > var RichmondTraffic = new > google.maps.KmlLayer('http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx'); > RichmondTraffic.setMap(map); > var StateShelters = new > google.maps.KmlLayer('https://cop.vdem.virginia.gov/gis_feeds/ShelterGeoRSS.ashx'); > StateShelters.setMap(map); > var trafficLayer = new google.maps.TrafficLayer(); > trafficLayer.setMap(map); > > // Safari supports the W3C Geolocation method > if(navigator.geolocation) { > navigator.geolocation.getCurrentPosition(function(position) { > initialLocation = new > google.maps.LatLng(position.coords.latitude,position.coords.longitude); > var placeMarker = new google.maps.Marker({ > position: initialLocation, > map: map, > }); > map.setCenter(initialLocation); > }, function() { > handleNoGeolocation(browserSupportFlag); > }); > } else { > // Browser doesn't support Geolocation > handleNoGeolocation(); > } > > function handleNoGeolocation() { > initialLocation = statepolice; > map.setCenter(initialLocation); > } > > function toggleLayer(layer) { > if (layer.getMap()) { > layer.setMap(null); > } else { > layer.setMap(map); > } > } > > } > > function toggleLayer(layer) { > if (layer.getMap()) { > layer.setMap(null); > } else { > layer.setMap(map); > } > } > > </script> > <style> > DIV.container { > width: 100%; > height: 50px; > align: center; > background-image: > url(http://www.gamecarver.com/img/appimages/DivHeaderBG2.png); > // display: table-cell; > vertical-align: middle; > font-size:medium; > font-family: sans-serif; > color: white; > text-align: center; > font-weight: bold;} > > </style> > </head> > <body style="margin:0px; padding:0px;" onload="initialize()"> > <div style="width:100%; height:385px"> > <div class="container" ><img > src="http://www.gamecarver.com/img/appimages/Header1.png";</div> > <div id="map_canvas" style="width:100%; height:100%"></div> > <div style="background-image: > url(http://www.gamecarver.com/img/appimages/DivHeaderBG2.png);height: 25px; > width: 100%"> > <button onclick="toggleLayer(RichmondTraffic)"> Traffic Incodents > </button> > <button onclick="toggleLayer(Hazmat)"> Hazmat </button> > <button onclick="toggleLayer(trafficLayer)"> Google Traffic </button> > </div> > </div> > </body> > </html> > > On Mon, May 10, 2010 at 8:04 PM, Jason Sanford <[email protected]>wrote: > > > > > Declare richmondTraffic (and any other KmlLayer) outside of any functions > > like where you declare initialLocation, statepolice, etc. > > > On Mon, May 10, 2010 at 7:06 PM, Jack Berberette <[email protected]>wrote: > > >> Thanks ESA for the quick response. The function looks simple enoug but > >> how do I set a variable in global scope...ie RichmondTraffic...based on the > >> code I have? Sorry to be such a newb...but I don't want to break what I > >> have...lol > > >> I can't thank you enough for helping me out, > > >> Jack > > >> Sent from my iPhone > > >> On May 10, 2010, at 6:25 PM, Esa <[email protected]> wrote: > > >> Construct a toggle function in global scope > > >>> function toggleLayer(layer) { > >>> if (layer.getMap()) { > >>> layer.setMap(null); > >>> } else { > >>> layer.setMap(map); > >>> } > >>> } > > >>> Then you can create buttons like: > > >>> <button onclick="toggleLayer(RichmondTraffic)"> RichmondTraffic </ > >>> button> > > >>> Note that also RichmondTraffic must be a global variable when called > >>> by a html button. > > >>> -- > >>> 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 > >>> [email protected]. > >>> To unsubscribe from this group, send email to > >>> [email protected]<google-maps-js-api-v3%[email protected]> > >>> . > >>> For more options, visit this group at > >>>http://groups.google.com/group/google-maps-js-api-v3?hl=en. > > >> -- > >> 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 > >> [email protected]. > >> To unsubscribe from this group, send email to > >> [email protected]<google-maps-js-api-v3%[email protected]> > >> . > >> For more options, visit this group at > >>http://groups.google.com/group/google-maps-js-api-v3?hl=en. > > > -- > > 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 > > [email protected]. > > To unsubscribe from this group, send email to > > [email protected]<google-maps-js-api-v3%[email protected]> > > . > > For more options, visit this group at > >http://groups.google.com/group/google-maps-js-api-v3?hl=en. > > -- > 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 [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group > athttp://groups.google.com/group/google-maps-js-api-v3?hl=en. -- 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 [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
![http://www.gamecarver.com/img/appimages/Header1.png"](http://www.gamecarver.com/img/appimages/Header1.png"){kind=link}