ヒートマップ レイヤ

プラットフォームを選択: Android iOS JavaScript
  1. 概要
  2. 可視化ライブラリのロード
  3. 重み付きデータポイントの追加
  4. ヒートマップ レイヤのカスタマイズ

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

概要

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

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

ヒートマップ レイヤは google.maps.visualization ライブラリの一部であり、デフォルトでは読み込まれません。可視化クラスは、メインの Maps JavaScript API コードとは別の自己完結型のライブラリです。このライブラリの機能を利用するには、最初に Maps JavaScript API ブートストラップ URL の libraries パラメータを使用してライブラリを読み込む必要があります。

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</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 を 1 つ追加すると、google.maps.LatLng(37.782, -122.441) を 3 回追加した場合と同じ効果が生じます。単一の配列内で weightedLocation オブジェクトと LatLng オブジェクトを組み合わせることができます。

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

  • 1 つの場所で大量のデータを追加する。重みが 1,000 の WeightedLocation オブジェクトを 1 つレンダリングする方が、1,000 個の 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 の場合、影響の半径がズームレベルに伴って増加し、指定されているすべての地理的な場所で色強度が保持されます。デフォルトは true です。
  • gradient: ヒートマップのカラー グラデーションです。CSS 色文字列の配列として指定されます。名前付きの拡張色と HSL(A) 値を除くすべての CSS3 色（RGBA を含む）がサポートされています。
  • maxIntensity: ヒートマップの最大強度です。デフォルトでは、ヒートマップ色は地図上の全ピクセルでポイントの最大濃度に応じて動的に変化します。このプロパティを使用すると、固定の最大値を指定できます。データセットに著しく高い強度の異常値がいくつか含まれている場合に、最大強度を設定すると便利な場合があります。
  • radius: 各データポイントの影響の半径です（ピクセル単位）。
  • opacity: 0 から 1 の間の数で表されるヒートマップの不透明度です。

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

サンプルを表示