looks like google pushed my "//Notice no "var" before variable assignment, that is taken care of above." comment into two lines, thusly breaking the JS - please either remove or make this one line again and that should work. ;)
On May 10, 6: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(thiswas 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 > > ... > > 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}