Google Maps APIでヒートマップを表示する方法

Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ的なものを表示したかった。調べてみるとAPIで提供されている模様。以下にサンプルとソース。

サンプル

https://taitan916.info/sample/heatmap/

ソース

//サンプルマップ作成。東京タワーを中心地に指定
var currentWindow = null;
var sample = { 'x':'35.65858', 'y':'139.745433'};
var latlng = new google.maps.LatLng(sample.x, sample.y);
var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//ヒートマップ用のサンプルデータの作成
var data = [
    {"surveyedPrice":1,pos:[139.745433,35.65858]}, //東京タワー
    {"surveyedPrice":2,pos:[139.73000000000002,35.66]}, //六本木ヒルズ
    {"surveyedPrice":3,pos:[139.76608399999998,35.681382]}, //東京駅
    {"surveyedPrice":3,pos:[139.68967299999997,35.758669]} //ときわ台
];
var bounds = new google.maps.LatLngBounds();
var pos, populations = [];
for (var i=0; i < data.length; i++) {
    pos = new google.maps.LatLng(data[i].pos[1], data[i].pos[0]);
    populations.push({
        location : pos,
        weight : data[i].surveyedPrice //ヒートマップの重み付けに使用するデータを指定
    })
    bounds.extend(pos); 
}

//ヒートマップレイヤの作成
var heatmap = new google.maps.visualization.HeatmapLayer({
    radius:50 //ヒートマップの各ポイントの大きさ
});

//ヒートマップレイヤをマップに表示
heatmap.setData(populations);
heatmap.setMap(map);

注意点

マップのAPIを呼び出す際にlibraries=visualizationのクエリが必要。以下のような形で呼び出す。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&libraries=visualization"></script>