How to hide or display a Google Maps Layer?
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.)
Alexander Farber
/me/likes: Java, С#, Perl, PHP, JavaScript, PostgreSQL, Linux, Azure /me/speaks: German, English, Russian /me/learns: https://github.com/afarber/android-questions https://github.com/afarber/unity-questions https://github.com/afarber/ios-questions
Updated on June 16, 2022Comments
-
Alexander Farber almost 2 years
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>