Open Weather Maps

by Hari Menon

HTML

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<div id="map" style="width: 100%; height: 100%"></div>

JavaScript

var map;

var center = new google.maps.LatLng(0, 0);

var RainMap = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        return "http://tile.openweathermap.org/map/rain/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    alt: "RainMap",
    name: "RainMap",
    maxZoom: 19
});



function init() {
    var mapOptions = {
        zoom: 3,
        center: center,
        mapTypeId: 'OSM',
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN],
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

    //add tile
    map.overlayMapTypes.push(RainMap);

}

init();