Jak ukryć lub wyświetlić warstwę Google Maps?

Przygotowałem uproszczony przypadek testowy i zrzut ekranu.

Myślę, że brakuje mi trochę, tylko kilka linii kodu.

Mam 2 nakładki (pogoda i chmury) na mojej Mapie Google JavaScript i chciałbym je ukryć lub pokazać, gdy kliknięto odpowiednie pole wyboru:

Oto przypadek testowy, wystarczy wkleić go do pliku .html i zostanie uruchomiony:

<code><!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>
</code>

AKTUALIZACJA: Dzięki, tutaj działa wersja robocza dla wszystkich

<code><!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>
</code>

questionAnswers(1)

yourAnswerToTheQuestion