JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=weather,visualization"></script>
<!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">

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

JavaScript

var map;
var weatherLayer;
    
$(function() {
    findCity('Berlin');

    $('#weather_box,#clouds_box').click(function(){
        if ($(this).is(':checked'))
            weatherLayer.setMap(map);
        else
            weatherLayer.setMap(null);
        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;
            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);
            //var cloudLayer = new google.maps.weather.CloudLayer();
            //cloudLayer.setMap(map);
        }
    });
}