Google Map上に雲と天気を表示する

【追記】Google Maps APIの「お天気＆雲レイヤ」と「Panoramioレイヤ」は2015年に廃止されるそうです。

いつのまにか、そんな機能がついていたらしい。

The Weather and Cloud Layers (Library)
なぜか、日本語版の「デベロッパーズガイド」にはこの機能のことが載ってない。

天気を表示するWeatherLayerと、雲を表示するCloudLayerを使用する場合は、libraries=weatherを付加してGoogle Map APIを読み込んでください。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&language=ja&libraries=weather">

1	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&language=ja&libraries=weather">

表示の仕方はヒートマップに比べるとだいぶ簡単。

function initialize() {
        var mapDiv = document.getElementById("map_canvas");
        var mapCanvas = new google.maps.Map(mapDiv, {
                center : new google.maps.LatLng(35.681382, 139.766084),
                zoom : 6,
                mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        
       //天気レイヤ追加
        var weatherLayer = new google.maps.weather.WeatherLayer(); 
        weatherLayer.setMap(mapCanvas);
       
        //雲レイヤ追加
        var cloudLayer = new google.maps.weather.CloudLayer(); 
        cloudLayer.setMap(mapCanvas);
        
        
}
google.maps.event.addDomListener(window, "load", initialize);

function initialize() {

var mapDiv = document.getElementById("map_canvas");

var mapCanvas = new google.maps.Map(mapDiv, {

center : new google.maps.LatLng(35.681382, 139.766084),

zoom : 6,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

//天気レイヤ追加

var weatherLayer = new google.maps.weather.WeatherLayer();

weatherLayer.setMap(mapCanvas);

//雲レイヤ追加

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

cloudLayer.setMap(mapCanvas);

}

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

example

投稿者: shimizu