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'); Hazmat.setMap(map); var map = new google.maps.KmlLayer(' http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx'); RichmondTraffic.setMap(map); var map = new google.maps.KmlLayer(' https://cop.vdem.virginia.gov/gis_feeds/ShelterGeoRSS.ashx'); 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'); > > 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]> > <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]. 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}