I copy and pasted your code and made some changes to it. I'm still having issues with your traffic layer acting weird when toggling it but the other two layers toggle fine.
http://test.geojason.info/viper.html You can see the code there and compare to yours. On Mon, May 10, 2010 at 8:45 PM, Jack Berberette <[email protected]> wrote: > Thanks for taking your time in this Brad :) I have implemented the changes > but I must something wrong because the map area is just grey now. Here's > the link to the page: http://www.gamecarver.com/viperapp3.html > > Here's the link to a page that has the maps on: > http://www.gamecarver.com/viperapp2.html (this was my first attempt) > > Here's the code after the changes....I'm really sorry to be a burden: > > <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; > var map; > > function toggleLayer(layer) { > if (layer.getMap()) { > layer.setMap(null); > } else { > layer.setMap(map); > } > } > > > function initialize() { > var myOptions = { > zoom: 14, > mapTypeId: google.maps.MapTypeId.ROADMAP > }; > var map = new google.maps.Map(document.getElementById("map_canvas"), > myOptions); > var map = new google.maps.KmlLayer(' > https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx'<https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx%27> > ); > Hazmat.setMap(map); > var map = new google.maps.KmlLayer(' > http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx'<http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx%27> > ); > RichmondTraffic.setMap(map); > var map = new google.maps.KmlLayer(' > https://cop.vdem.virginia.gov/gis_feeds/ShelterGeoRSS.ashx'<https://cop.vdem.virginia.gov/gis_feeds/ShelterGeoRSS.ashx%27> > ); > StateShelters.setMap(map); > var map = 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); > } > > } > > > > > > </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="javascript: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:31 PM, Brad <[email protected]> wrote: > >> #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'<https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx%27> >> ); >> > Hazmat.setMap(map); >> > var RichmondTraffic = new google.maps.KmlLayer(' >> http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx'<http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx%27> >> ); >> > RichmondTraffic.setMap(map); >> > var StateShelters = new google.maps.KmlLayer(' >> https://cop.vdem.virginia.gov/gis_feeds/ShelterGeoRSS.ashx'<https://cop.vdem.virginia.gov/gis_feeds/ShelterGeoRSS.ashx%27> >> ); >> > 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<http://www.gamecarver.com/img/appimages/DivHeaderBG2.png%29;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]> >> <google-maps-js-api-v3%[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]> >> <google-maps-js-api-v3%[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]> >> <google-maps-js-api-v3%[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 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]<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 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}
