さてさて、ある計画でヒートマップ作りたいねってことで、やりました。
(少し時間が空いてしまった・・・間違ってたらごめんなさい。)
まず必要なものとして、Google Map APIのKeyが必要になります。
こちらのブログを参考に取得しましょう。
キーを取得したら、まず以下の記述が必要になります。
1 2 3 | <script type="text/javascript" |
次は地図の表示。
地図はCanvasに描画されます。ですので
1 2 | <!-- 地図の表示領域 --><div id="map-canvas"></div> |
こんな感じでHTMLを記載します。
で、マップを表示すために以下のように書きます。
やってることは説明を見ればわかると思います。
1 2 3 4 5 6 7 8 9 10 | // 表示オプション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 ); |
次にヒートマップ
基本的に、データの座標と値を指定します。
あとは、ポイントの描画の広さや透過度を指定します。
データは以下のように定義し、ヒートマップレイヤーのオブジェクトを作成し、マップを関連付ければ完成です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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です。
(1.00 / 1)
(0.00 / 1)