Google Mapでヒートマップを作成
Google Mapでヒートマップを作成する
Google Map APIを使うと、簡単にヒートマップを作成できます。
まずはサンプル
http://workshops.ddns.net/map/heat_map
さくっとサンプルコードを載せます
<div id="map_canvas"></div>
<script>
data = [
{"Weight":31500,pos:[138.549837,36.534579]},
{"Weight":19600,pos:[138.552933,36.537296]},
{"Weight":4950,pos:[138.564714,36.461183]},
];
var data = gon.heat_map_data;
function initialize() {
//地図初期化
var initPos = new google.maps.LatLng(39.703531,141.152667); //地図の初期位置
var myOptions = {
noClear : true,
center : initPos,
zoom : 10,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//ヒートマップ用のデータの作成
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[0], data[i].pos[1]);
populations.push({
location : pos,
weight : data[i].picture_num //ヒートマップの重み付けに使用するデータを指定(写真数)
})
bounds.extend(pos);
}
map_canvas.fitBounds(bounds); //全てのデータが画面に収まる様に表示を変更
//ヒートマップレイヤの作成
var heatmap = new google.maps.visualization.HeatmapLayer({
radius:25 //ヒートマップの各ポイントの大きさ
});
heatmap.setData(populations);
heatmap.setMap(map_canvas);
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
Googleは、Weightをサーバーサイドで計算することを想定しているようです。