今日の人気記事

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

当ページのリンクには広告が含まれています。

jQuery Plugin » 画像 » 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>

jQueryプラグイン「Heat Map」

ソース（ HTML + jQuery ）

関連記事（一部広告含む）