Toggling Weather Layers in Google Maps v3

Question

I've looked through the answers for other questions similar to mine, but I'm still unable to get my code to work. Right now, I'm simply trying to add a toggle on/off button for the weather layer on the map. However, nothing happens when I click the button, and I'm not sure where I'm going wrong.

 <script type="text/javascript">
// Declaring the map as a global variable
var map;

function initialize() {
    var latlng = new google.maps.LatLng(27.7428, -97.4019);
    var weatherOn = false; //starts off false because the weather layer is not on by default

     // Setting up the map options
     var mapOptions = {
      center: latlng,
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      backgroundColor:'#c0c0c0',
      draggableCursor: 'pointer',
      draggingCursor: 'crosshair'
      };

    // Assigning map to its variable
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    var weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
    });
    // weatherLayer.setMap(map);

    // Setting a listener that will toggle the weather layer
    google.maps.event.addDomListener(document.getElementById("weatherToggle"), 'click', function() {
        if ( weatherOn == true ) {
            weatherLayer.setMap(null);
            weatherOn = false;
        }
        else {
            weatherLayer.setMap(map);
            weatherOn = true;
        }
    });
};
</script>

weatherToggle is the id for the button that I created on my page. Thanks for the help!

geocodezip · Answer 1 · 2013-12-11T22:04:51.370

Are you including the weather library? This code works for me:

<!DOCTYPE html>
<html>
  <head>
<title>Google Maps</title>
      <style type="text/css">
html, body, #map-canvas {
    width: 100%;
    height: 500px;
    margin: 0px;
    padding: 0px
}
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=weather">
    </script>
 <script type="text/javascript">
// Declaring the map as a global variable
var map;

function initialize() {
    var latlng = new google.maps.LatLng(27.7428, -97.4019);
    var weatherOn = false; //starts off false because the weather layer is not on by default

     // Setting up the map options
     var mapOptions = {
      center: latlng,
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      backgroundColor:'#c0c0c0',
      draggableCursor: 'pointer',
      draggingCursor: 'crosshair'
      };

    // Assigning map to its variable
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    var weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
    });
    // weatherLayer.setMap(map);

    // Setting a listener that will toggle the weather layer
    google.maps.event.addDomListener(document.getElementById("weatherToggle"), 'click', function() {
        if ( weatherLayer.getMap() != null ) {
            weatherLayer.setMap(null);
        }
        else {
            weatherLayer.setMap(map);
        }
    });
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>  
</head>
  <body>
<input type="button" id="weatherToggle" value="toggle"></input>
<div id="map-canvas"></div>
  </body>
</html>

working example

Ah, thank you so much! This is my first time messing with the weather layer, so I didn't realize there was a library to reference. — jbri, Dec 11 '13 at 22:08

Toggling Weather Layers in Google Maps v3

1 Answers1