Edit in JSFiddle

JavaScript
HTML
CSS
Result

function initialize() {
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(20.5937, 78.9629),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var weather = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.DEGREE //Temperature unit can also be changed to FAHRENHEIT by using the keyword "FAHRENHEIT"
    });
    weather.setMap(map);
    var cloud = new google.maps.weather.CloudLayer();
    cloud.setMap(map); //Comment out this line if you do not wish to
}

<html>
<head>
    <title>Google Maps API Example: Simple Weather Layer</title>
    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=weather"></script>
    
    <script type="text/javascript">
        <!--Insert the javascript below, if you are trying this code-->
    </script>
</head>

<body onload="initialize()">
    <div id="map_canvas" style="width: 530px; height: 230px"></div>
</body>
</html>