How to hide or display a Google Maps Layer?

google-maps, google-maps-api-3, google-weather-api, weather, weather-api

Solution

You can hide/show the layer with `setMap` method:

if ($(this).is(':checked'))
    weatherLayer.setMap(map); // show
else
    weatherLayer.setMap(null); // hide

See working example: http://jsfiddle.net/EeVUr/2/ (removed your second checkbox, as you have only one layer now. But you can easily create two different layers and switch them.)

Problem

I have prepared a simplified test case and a screenshot. I think I'm missing a tiny bit, just few lines of code. I have 2 overlays (the weather and clouds) in my JavaScript Google Map and would like to hide or show them when a corresponding check box is clicked: Here is the test case, just paste it into an .html file and it will run: ``` <!DOCTYPE HTML> <html> <head> <style type="text/css"> h1,p { text-align: center; } #map { width: 700px; height: 400px; margin-left: auto; margin-right: auto; background-color: #CCCCFF; } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(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); } }); } </script> </head> <body> <h1>Berlin</h1> <p>Show: <label><input type="checkbox" id="weather_box" checked>weather</label> <label><input type="checkbox" id="clouds_box">clouds</label> </p> <div id="map"></div> </body> </html> ``` UPDATE: Thanks, here a working version for everyone ``` <!DOCTYPE HTML> <html> <head> <style type="text/css"> h1,p { text-align: center; } #map { width: 700px; height: 400px; margin-left: auto; margin-right: auto; background-color: #CCCCFF; } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> 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'); } }); } </script> </head> <body> <h1>Berlin</h1> <p>Show: <label><input type="checkbox" id="weather_box" disabled="true" checked>weather</label> <label><input type="checkbox" id="clouds_box" disabled="true">clouds</label> </p> <div id="map"></div> </body> </html> ```

Original source