title: How to hide or display a Google Maps Layer?
body: <p>I have prepared a simplified test case and a screenshot.</p>
  
  <p>I think I'm missing a tiny bit, just few lines of code.</p>
  
  <p>I have 2 overlays (the <a href="https://developers.google.com/maps/documentation/javascript/layers#WeatherLayer" rel="nofollow noreferrer">weather and clouds</a>) in my JavaScript Google Map and would like to hide or show them when a corresponding check box is clicked:</p>
  
  <p><img src="https://i.stack.imgur.com/H9tK4.png" alt="enter image description here"></p>
  
  <p>Here is the test case, just paste it into an .html file and it will run:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      h1,p { 
          text-align: center; 
      }
  
      #map { 
          width: 700px; 
          height: 400px; 
          margin-left: auto; 
          margin-right: auto; 
          background-color: #CCCCFF; 
      }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;language=de&amp;libraries=weather"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(function() {
      findCity('Berlin');
  
      $('#weather_box,#clouds_box').click(function(){
          alert('How to hide/show layers? Checked: ' + $(this).is(':checked'));
      });
  });
  
  function createMap(center) {
      var opts = {
          zoom: 6,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      return new google.maps.Map(document.getElementById('map'), opts);
  }
  
  function findCity(city) {
      var gc = new google.maps.Geocoder();
      gc.geocode({address: city}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              var pos = results[0].geometry.location;
              var map = createMap(pos);
              var marker = new google.maps.Marker({
                  map: map, 
                  title: city,
                  position: pos,
                  animation: google.maps.Animation.DROP
              });
              var weatherLayer = new google.maps.weather.WeatherLayer({
                  temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
              });
              weatherLayer.setMap(map);
              //var cloudLayer = new google.maps.weather.CloudLayer();
              //cloudLayer.setMap(map);
          }
      });
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Berlin&lt;/h1&gt;
  &lt;p&gt;Show:
  &lt;label&gt;&lt;input type="checkbox" id="weather_box" checked&gt;weather&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" id="clouds_box"&gt;clouds&lt;/label&gt;
  &lt;/p&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong> Thanks, here a working version for everyone</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      h1,p { 
          text-align: center; 
      }
  
      #map { 
          width: 700px; 
          height: 400px; 
          margin-left: auto; 
          margin-right: auto; 
          background-color: #CCCCFF; 
      }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;language=de&amp;libraries=weather"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var map;
  var WeatherLayer;
  var CloudsLayer;
  
  $(function() {
      findCity('Berlin');
  
  });
  
  function createMap(center) {
      var opts = {
          zoom: 6,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      return new google.maps.Map(document.getElementById('map'), opts);
  }
  
  function findCity(city) {
      var gc = new google.maps.Geocoder();
      gc.geocode({address: city}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              var pos = results[0].geometry.location;
              map = createMap(pos);
              var marker = new google.maps.Marker({
                  map: map, 
                  title: city,
                  position: pos,
                  animation: google.maps.Animation.DROP
              });
              weatherLayer = new google.maps.weather.WeatherLayer({
                  temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
              });
              weatherLayer.setMap(map);
              cloudsLayer = new google.maps.weather.CloudLayer();
              //cloudsLayer.setMap(map);
  
              $('#weather_box').click(function(){
                  weatherLayer.setMap($(this).is(':checked') ? map : null);
              });
  
              $('#clouds_box').click(function(){
                  cloudsLayer.setMap($(this).is(':checked') ? map : null);
              });
  
              $('#weather_box,#clouds_box').removeAttr('disabled');
          }
      });
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Berlin&lt;/h1&gt;
  &lt;p&gt;Show:
  &lt;label&gt;&lt;input type="checkbox" id="weather_box" disabled="true" checked&gt;weather&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" id="clouds_box" disabled="true"&gt;clouds&lt;/label&gt;
  &lt;/p&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>