今日の人気記事

  1. 指定した要素がなんでも編集できちゃう「trocar.js」
  2. フローチャートを作成「Flow Chart」
  3. テーブルにタブ機能を追加「Table Tabs」
  4. クリック操作で開閉する左右のサイドパネル「Panel Slider」
  5. テーブルにスクロールバーをつける「Scroll Table」

Google マップにヒートマップを追加「Heat Map」

スポンサーリンク

Google マップにヒートマップを追加するプラグイン「Heat Map」を紹介します。

jQueryプラグイン「Heat Map」

このプラグインを使えば、都市名と暑さの値を入力するだけで簡単にヒートマップを作成することができます。しかも!Google マップ上に。

スクリプトでどこからか温度を取得することができれば、自動でヒートマップを更新することも可能かもしれませんね。

スポンサーリンク

それではデモページのヒートマップをご覧ください。

「Heat Map」のデモ

ソース( 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>
スポンサーリンク

関連記事(一部広告含む)