Google マップにヒートマップを追加「Heat Map」
当ページのリンクには広告が含まれています。
スポンサーリンク
Google マップにヒートマップを追加するプラグイン「Heat Map」を紹介します。
jQueryプラグイン「Heat Map」
このプラグインを使えば、都市名と暑さの値を入力するだけで簡単にヒートマップを作成することができます。しかも！Google マップ上に。
スクリプトでどこからか温度を取得することができれば、自動でヒートマップを更新することも可能かもしれませんね。
スポンサーリンク
それではデモページのヒートマップをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Heat Map のデモでーす。">
<title>Heat Map - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="heatmap.js"></script>
<style>
#target {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h1>Heat Map のデモでーす。</h1>
<div id="target"></div>
<table id="source">
<tbody>
<tr>
<th class="source">Tokyo</td>
<td class="value">2.5</td>
</tr>
<tr>
<th class="source">Kyoto</td>
<td class="value">1.5</td>
</tr>
<tr>
<th class="source">Nagano</td>
<td class="value">3.2</td>
</tr>
<tr>
<th class="source">Osaka</td>
<td class="value">2.2</td>
</tr>
<tr>
<th class="source">Nagoya</td>
<td class="value">5.2</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('#source').heatmap('target', 15);
});
</script>
</body>
</html>
スポンサーリンク