Google Maps APIでヒートマップを表示する方法
2024/01/13
Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ的なものを表示したかった。調べてみるとAPIで提供されている模様。以下にサンプルとソース。
サンプル
https://taitan916.info/sample/heatmap/
ソース
//サンプルマップ作成。東京タワーを中心地に指定 var currentWindow = null; var sample = { 'x':'35.65858', 'y':'139.745433'}; var latlng = new google.maps.LatLng(sample.x, sample.y); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //ヒートマップ用のサンプルデータの作成 var data = [ {"surveyedPrice":1,pos:[139.745433,35.65858]}, //東京タワー {"surveyedPrice":2,pos:[139.73000000000002,35.66]}, //六本木ヒルズ {"surveyedPrice":3,pos:[139.76608399999998,35.681382]}, //東京駅 {"surveyedPrice":3,pos:[139.68967299999997,35.758669]} //ときわ台 ]; 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[1], data[i].pos[0]); populations.push({ location : pos, weight : data[i].surveyedPrice //ヒートマップの重み付けに使用するデータを指定 }) bounds.extend(pos); } //ヒートマップレイヤの作成 var heatmap = new google.maps.visualization.HeatmapLayer({ radius:50 //ヒートマップの各ポイントの大きさ }); //ヒートマップレイヤをマップに表示 heatmap.setData(populations); heatmap.setMap(map);
注意点
マップのAPIを呼び出す際にlibraries=visualizationのクエリが必要。以下のような形で呼び出す。
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&libraries=visualization"></script>
関連記事
-
GoogleMapAPIのジオコードで存在するはずの住所が見つからない場合の原因について(ZERO_RESULTS)
GoogleMapAPIを利用したプログラムで確かに存在するはずの住所をジオコー ...
-
GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得
GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...
-
Advanced Custom FieldsでGoogleMapの使用する方法
Advanced Custom FieldsでGoogleMapを使用したかった ...
-
androidでgeolocationを使うとtimeoutになる
Geolocation APIを用いて現在地をGoogleMapに表示させるとい ...
-
Google Maps APIで半径●メートル範囲を円で表示する方法
Google Maps APIでマーカーを立てて、そこから範囲●mもしくは●km ...