JSFiddle - React, Tailwind, and code Playground

by Ty

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Weather layer</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
    </head>
    
    <body>
        <div id="map-canvas"></div>
    </body>

</html>

JavaScript

function initialize() {
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(49.265984, -123.127491)
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
    });
    weatherLayer.setMap(map);

    var cloudLayer = new google.maps.weather.CloudLayer();
    cloudLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);