ヒートマップ レイヤ

1. 概要
2. 可視化ライブラリのロード
3. 重み付きデータポイントの追加
4. ヒートマップ レイヤのカスタマイズ

ヒートマップ レイヤは、クライアント側でのヒートマップのレンダリングを可能にします。

概要

ヒートマップは、地理的なポイントのデータの強度を表すために使用する可視化です。ヒートマップ レイヤが有効である場合、色付きのオーバーレイがマップの上に表示されます。デフォルトでは、高い強度の領域が赤色、低い強度の領域が緑色で表されます。

Google Maps JavaScript API は、ヒートマップ データのレンダリングをヒートマップ レイヤを介してクライアント側で、またはフュージョン テーブルを介してサーバー側で行うことができます。この 2 つの方法には、次のような主な相違点があります。

ヒートマップ レイヤ	フュージョン テーブル レイヤ
多数のデータポイントがあると、パフォーマンスが低下します。	データポイントが多いほど、パフォーマンスへの影響が少なくなります。
色のグラデーション、データポイントの半径、各データポイントの強度などのオプションを変更して、ヒートマップの外観をカスタマイズできます。	ヒートマップの外観はカスタマイズできません。
高いズームレベル時にヒートマップ データを非表示にするかどうかを制御できます。	すべてのヒートマップ データは、ズームインすると非表示になります。
データは、HTML を使用した保存、サーバーへの保存、即時の計算が可能です。データは実行時に変更できます。	すべてのデータが、フュージョン テーブルに格納されている必要があります。データは、実行時には容易に変更できません。

可視化ライブラリのロード

ヒートマップ レイヤは google.maps.visualization ライブラリの一部であり、デフォルトではロードされません。可視化クラスは、メインの Google Maps JavaScript API のコードから独立した別のライブラリです。このライブラリの機能を使うには、まず Maps JavaScript API のブートストラップ URL の中で libraries パラメータを用いてライブラリをロードする必要があります。

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

ヒートマップ レイヤの追加

ヒートマップ レイヤを追加するには、初めに新しい HeatmapLayer オブジェクトを作成し、配列または MVCArray[] オブジェクトの形のいくつかの地理データを指定する必要があります。データは、LatLng オブジェクトまたは WeightedLocation オブジェクトのいずれかです。HeatmapLayer オブジェクトのインスタンス化後に、setMap() メソッドを呼び出して、これをマップに追加します。

次の例では、14 個のデータポイントをサンフランシスコのマップに追加しています。

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

重み付きデータポイントの追加

ヒートマップでは、LatLng オブジェクトまたは WeightedLocation オブジェクト、またはこの 2 つの組み合わせのレンダリングが可能です。両方のオブジェクトはマップ上の単一のデータポイントを表しますが、WeightedLocation オブジェクトでは該当データポイントに追加で重みを指定できます。データポイントに重みを適用すると、WeightedLocation は単純な LatLng オブジェクトより高い強度でレンダリングされます。重みはリニア スケールであり、各 LatLng オブジェクトは暗黙的に重み 1 を持ちます。{location: new google.maps.LatLng(37.782, -122.441), weight: 3} の単一の WeightedLocation を追加することは、google.maps.LatLng(37.782, -122.441) を 3 回追加した場合と同じ効果になります。単一の配列に、weightedLocation オブジェクトと LatLng オブジェクトを混在させることができます。

次の場合に、WeightedLocation オブジェクトを LatLng の代わりに使用すると便利です。

• 単一の場所に大量のデータを追加する。重みが 1000 の単一の WeightedLocation オブジェクトのレンダリングは、1000 個の LatLng オブジェクトのレンダリングより高速です。
• 任意の値に基づいてデータに強調を適用する。たとえば、地震データのプロット時に LatLng オブジェクトを使用できますが、WeightedLocation を使用すると、リヒター スケールで各地震のマグニチュードを計測できます。

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

ヒートマップ レイヤのカスタマイズ

以下のヒートマップ オプションを使用して、ヒートマップのレンダリング方法をカスタマイズできます。詳細については、HeatmapLayerOptions ドキュメントをご覧ください。

• dissipating:ズーム時にヒートマップを非表示にするかどうかを指定します。Dissipating が false の場合、影響の半径がズームレベルに伴って増加し、指定されているすべての地理的な場所で色強度が保持されます。デフォルトは false です。
• gradient:ヒートマップの色グラデーションです。CSS 色文字列の配列として指定されます。RGBA を含むすべての CSS3 色がサポートされます。ただし、名前付き拡張色および HSL(A) 値は除きます。
• maxIntensity:ヒートマップの最大強度です。デフォルトでは、ヒートマップ色はマップ上の全ピクセルでポイントの最大濃度に応じて動的に変化します。このプロパティを使用すると、固定の最大値を指定できます。データセットに著しく高い強度の異常値がいくつか含まれている場合に、最大強度を設定すると便利な場合があります。
• radius:各データポイントの影響の半径です（ピクセル単位）。
• opacity:0 から 1 の間の数で表されるヒートマップの不透明度です。

下のサンプルは、利用可能ないくつかのカスタマイズ オプションを示しています。

お住まいの地域ではサンプル・アプリケーションがご利用できない場合があります。

ヒートマップ レイヤの例を表示する