読者です 読者をやめる 読者になる 読者になる

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をサーバーサイドで計算することを想定しているようです。

参考

Layers  |  Google Maps Javascript API  |  Google Developers