Toggling Weather Layers in Google Maps v3

Question

Toggling Weather Layers in Google Maps v3

1.3k Views Asked by jbri At 11 April 2025 at 01:20

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!

Original Q&A

There are 1 best solutions below

**geocodezip** · Answer 1

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

Toggling Weather Layers in Google Maps v3

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-MAPS-API-3

Related Questions in GOOGLE-WEATHER-API

Trending Questions

Popular # Hahtags

Popular Questions