Awesome Brad...this is soooo helpful :) Everything seems to be working except my initial location placemarker doesn't show for some reason. Not sure why...I'll paste the code below.
I work for The Dept. of Emergency Management here in Virginia and our goal is to help our first responders by providing some "boots on the ground" type tools. Anything we can do to help them can potentially save a life. I'm a MCSE by trade but I guess my boss thought I was best suited to give this a whirl :) Once my team learns how to do this we'll start adding better features to the map to help those guys out even further. So trust me when I say...there's a lot of people who'll appreciate your helping me with this :) Anyway... Here's the code...not sure why the initial location marker doesn't show. The rest is FREAKING AWESOME!!!!! ( http://www.gamecarver.com/viperapp6.html) - Jack <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 = newgoogle.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> <button onclick="toggleLayer(StateShelters)"> State Shelters </button> </div> </div> </body> </html> On Mon, May 10, 2010 at 8:55 PM, Brad <[email protected]> wrote: > 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]<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}