No problem Jack - I definitely understand what it's like getting into it. Try this code and review the changes i made:
<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 initialize() { var myOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; //Notice no "var" before variable assignment, that is taken care of above. map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); Hazmat = new google.maps.KmlLayer(' https://cop.vdem.virginia.gov/gis_feeds/GeoRSS2.ashx'); RichmondTraffic = new google.maps.KmlLayer(' http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx'); StateShelters = new google.maps.KmlLayer(' https://cop.vdem.virginia.gov/gis_feeds/ShelterGeoRSS.ashx'); trafficLayer = new google.maps.TrafficLayer(); //Just to demonstrate the use of toggleLayer toggleLayer(Hazmat); toggleLayer(RichmondTraffic); toggleLayer(StateShelters); toggleLayer(trafficLayer); // 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); } } </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 May 10, 6: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'); > 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 > > ... > > read more » -- 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}