If RichmondTraffic is the only one giving you issues, than you can
change this:
RichmondTraffic = new google.maps.KmlLayer('
http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx');
to this:
RichmondTraffic = new google.maps.KmlLayer('
http://map.richmondgov.com/Bing/Traffic/georssfeed.ashx',{preserveViewport:true});
(you might consider adding ",{preserveViewport:true}" to all the
KmlLayer calls as that will maintain the viewport when all the layers
are added removed - this isn't an issue now but could be in the future
depending on if the feed content changes)
On May 10, 6:51 pm, Jason Sanford <[email protected]> wrote:
> 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
>
> ...
>
> 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}
