google mapを利用したヒートマップ作成
現在、Google mapを使ってヒートマップを作成しようと
Java scriptを動かしているのですがヒートマップレイヤーが上手く作成できなかったので質問させてください。
発生している問題・エラーメッセージ
エラーは無く正常に作動している模様
ですが、ヒートマップレイヤーが機能していない
該当のソースコード
<html> <head> <title>GoogleMapAPIで地図上にヒートマップを配置する</title> </head> <body> <h1>GoogleMapAPIで地図上にヒートマップを配置する</h1> <!-- Map表示用エレメント --> <div id="map" style="width:1800px;height:1000px;"></div> <!-- GoogleMapAPIを読み込む --> <!-- ヒートマップを扱うために[libraries=visualization]が追加されている点に注意 --> <script src="http://maps.googleapis.com/maps/api/js?key=my key&v=3&language=ja&libraries=visualization"></script> <script> // Google Mapを初期化してエレメントに適用 // 緯度経度は例えばこちらのページを参考(http://imakoko.didit.jp/imakoko_html/memo/map_to_latlang.php) var map = new google.maps.Map(document.getElementById('map'), { center: { lat:43.068664, lng:141.351034 }, zoom: 13 }); // 表示させるデータ(ピン用と同じ) var data = new Array( {position:{lat:43.07072, lng:141.32076},size:'1'}, {position:{lat:43.05792, lng:141.35844},size:'1'}, {position:{lat:43.06594, lng:141.34658},size:'1'}, {position:{lat:43.05969, lng:141.34654},size:'1'}, ・・・・・・ {position:{lat:43.05716, lng:141.35694},size:'1'} ); //ヒートマップ用のデータの作成 var pos, heatmapData = []; for (var i=0; i < data.length; i++) { heatmapData.push({ location : new google.maps.LatLng(data[i].position.lat, data[i].position.lng), weight : data[i].size //ヒートマップの重み付けに使用するデータを指定 }); } //ヒートマップレイヤオブジェクトを作成 var heatmap = new google.maps.visualization.HeatmapLayer({ radius:30, opacity:0.95 }); // ヒートマップレイヤにヒートマップデータを適用 heatmap.setData(heatmapData); // ヒートマップレイヤをMapオブジェクトに紐付けてMap上に表示 heatmap.setMap(map); </script> </body> </html>試したこと
sampleとしてweightを1にしてやっています。
データは400個あるのですが、ヒートマップを作成する際にデータの上限等はあるのでしょうか。
データを3,4個のみで動かしたところ正常にヒートマップが作成されます。
あなたの回答
tips
プレビュー