Google Map APIでヒートマップを表示してみた

さてさて、ある計画でヒートマップ作りたいねってことで、やりました。
(少し時間が空いてしまった・・・間違ってたらごめんなさい。)

まず必要なものとして、Google Map APIのKeyが必要になります。
こちらのブログを参考に取得しましょう。

キーを取得したら、まず以下の記述が必要になります。

<script
    type="text/javascript" 
    src="http://maps.google.com/maps/api/js?key=<あなたのアクセスキー>&libraries=visualization"></script>

次は地図の表示。
地図はCanvasに描画されます。ですので

<!-- 地図の表示領域 -->
<div id="map-canvas"></div>

こんな感じでHTMLを記載します。
で、マップを表示すために以下のように書きます。
やってることは説明を見ればわかると思います。

// 表示オプション
var options =
{
	center: new google.maps.LatLng( 34.712217,137.724507 ), // 地図の場所
	mapTypeId: google.maps.MapTypeId.TERRAIN,               // 地図の種類(HYBRID/ROADMAP/SATELLITE/TERRAIN)
	zoom:7                                                  // 地図の縮尺
};
var canvas = document.getElementById( 'map-canvas' );
// Mapクラスを作成し地図を表示する
var map = new google.maps.Map( canvas, options );

次にヒートマップ
基本的に、データの座標と値を指定します。
あとは、ポイントの描画の広さや透過度を指定します。

データは以下のように定義し、ヒートマップレイヤーのオブジェクトを作成し、マップを関連付ければ完成です。

var datas = [
	 {location: new google.maps.LatLng(43.0643129,141.3467274),weight:0}
	,{location: new google.maps.LatLng(35.1837543,136.9002195),weight:7.15}
	,{location: new google.maps.LatLng(35.0045302,135.8685538),weight:7.15}
	,{location: new google.maps.LatLng(34.6913011,135.1831335),weight:14.29}
];

// ヒートマップレイヤーのオブジェクトを生成
var heatmap = new google.maps.visualization.HeatmapLayer({
	 data: datas
	,maxIntensity:50
	,radius:50
	,opacity:0.8
});
// Mapのインスタンスを設定
heatmap.setMap(map);

やり方自体は非常に簡単です。
JavaScriptいじってサイトを作れる人ならできます。
あとはGoogleのヒートマップのドキュメント読みながらやればOKです。