Google Map上にヒートマップを作成したい場合、自分で細かい実装をしなくてもAPI側が用意してくれているので入力となるデータ(中心の座標とその点の重み)さえ用意できれば簡単に作成することができる。
次の例ではjQueryで非同期的にjsonファイルを読み込んでその中のデータをヒートマップに反映させている。
var map = new google.maps.Map(document.getElementById("mapField"), option); jQuery(document).ready(function(){ $.getJSON("data.json", function(data) { var bounds = new google.maps.LatLngBounds(); var pos, populations = []; for (var i=0; i < data.length; i++) { pos = new google.maps.LatLng(data[i].lat, data[i].lng); populations.push({ location : pos, weight : data[i].weight //ヒートマップの重み付けに使用するデータを指定 }) bounds.extend(pos); } map.fitBounds(bounds); //全てのデータが画面に収まる様に表示を変更 //ヒートマップレイヤの作成 var heatmap = new google.maps.visualization.HeatmapLayer({ radius:25 //ヒートマップの各ポイントの大きさ }); heatmap.setData(populations); heatmap.setMap(map); }); });
マップのオプションなども加える必要があるが、根幹となる部分はこの程度で、あとはapi側がいい感じにプロットしてくれる。
詳しくは以下。
Heatmap Layer