注: フュージョン テーブル レイヤは試験運用中です。
フュージョン テーブル レイヤは Google のフュージョン テーブルに含まれているデータをレンダリングします。
概要
Google Maps JavaScript API を使うと、FusionTablesLayer オブジェクトによって、Google のフュージョン テーブルに含まれるデータをマップ上のレイヤとしてレンダリングできます。Google のフュージョン テーブルとは、各行に特定の地物のデータが格納されたデータベース テーブルのことです。地理データの場合、Google のフュージョン テーブル内の各行には、地物の位置情報を示す位置データも含まれています。FusionTablesLayer はフュージョン テーブルに対するインターフェースを提供し、位置データの自動レンダリングや、地物の追加情報を表示するクリック可能なオーバーレイもサポートしています。
以下は地理データを表示するフュージョン テーブルの例です。
使用制限
Google Maps JavaScript API を使うと、最大で 5 つのフュージョン テーブル レイヤをマップに追加できます。このうち 1 つのレイヤには、スタイリング規則を 5 つまで適用できます。
補足:
- テーブル内の上から 10 万行目までのデータがマッピングの対象になり、クエリの結果に含まれます。
- 空間述語を含むクエリは、この最初の 10 万行の中からデータを返します。そのため、非常に大きなテーブルにフィルタを適用して、フィルタに一致するデータが 10 万行目より下に存在した場合は、該当する行は表示されません。
- データのインポートや挿入を行う際は、以下の点に注意してください。
- 1 回の API 呼び出して送信できるデータの合計サイズは、最大で 1 MB です。
- フュージョン テーブルの 1 つのセルに入るデータの文字数は、最大で 100 万文字です。場合によっては、座標の精度を落としたり、ポリゴンやラインの描画を簡略化したりする必要があります。
- 各テーブルでサポートされる頂点の数は、最大で 500 万個です。
- マップの表示中は、以下の動作になります。
- マルチジオメトリの 10 個の最大エリア コンポーネントが表示されます。
- 十分にズームアウトすると、500 件を超える地物を含むテーブルは（ラインやポリゴンではなく）点を表示します。
フュージョン テーブルのセットアップ
フュージョン テーブルは地理データのサポートがを組み込まれたデータ テーブルです。詳細については、フュージョン テーブルのドキュメントをご覧ください。API 内でフュージョン テーブル レイヤを使って Google マップ上にデータを表示するには、テーブルが以下の条件を満たす必要があります。
- テーブルをPublicまたはUnlistedにして共有すること。
- テーブル内の 1 つ以上の列を
Locationとして公開すること。フュージョン テーブルのウェブ インターフェースで、Edit > Modify Columns と選択して、公開する列を選択します。
Location 列は以下のフォーマット要件を満たす必要があります。
- 緯度と経度の座標は、カンマで区切って 1 つの列に入力する（緯度,経度）、もしくは 2 列（緯度用に 1 列、経度用に 1 列）を使って各列に入力すること。詳しくは、フュージョン テーブルのドキュメントをご覧ください。
- 住所は最初にジオコーディングされるようにすること。フュージョン テーブルのウェブ インターフェースで、File > Geocode と選択します。
- KML ジオメトリ データ（点、線、ポリゴンなど）がサポートされます。
FusionTables レイヤの作成
FusionTablesLayer コンストラクタは、テーブルの暗号化 ID を使用して、一般公開されているフュージョン テーブルからレイヤを作成します。ID はフュージョン テーブル UI で File > About と選択すると確認できます。
フュージョン テーブルのレイヤをマップに追加するには、レイヤを作成して、以下のプロパティを持つ query オブジェクトを渡します。
selectプロパティ。値は位置情報を含む列の名称です。空白や予約語を含む列名や、アルファベット以外で始まる列名は、必ず引用符でくくってください。fromプロパティ。値はいずれかの暗号化 ID です。
次に他のオーバーレイと同様に、レイヤの map を自身の Map オブジェクトに設定します。
注: 旧バージョンの Google Maps JavaScript API は、フュージョン テーブルの参照に数字の ID を使用しています。この方法は引き続き利用できますが、できる限り暗号化 ID を使うことをお勧めします。
以下の例は、一般公開されているフュージョン テーブルを使用して、2009 年にシカゴで発生した殺人事件の情報を表示します。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.850033, lng: -87.6500523},
zoom: 11
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
}
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.850033, lng: -87.6500523},
zoom: 11
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
}
});
layer.setMap(map);
}
フュージョン テーブルのクエリ
フュージョン テーブルでは、高機能なクエリを適用して、結果セットが指定の条件を満たすよう制限をかけることもできます。クエリは FusionTablesLayerOptions の query パラメータを使って指定します。
query: {
select: locationColumn,
from: fusionTableID,
where: constraintClause
}
locationColumn は、既存のジオコーディングされたタイプ Location の列です。select や where フィールドで、空白や予約語を含む列名や、アルファベット以外で始まる列名を使用するときは、必ず引用符でくくってください。
サポートされる検索演算子の一覧は、フュージョン テーブル ドキュメントで確認できます。
次の例は、シカゴ交通局（CTA）のレッドラインの路線上で、平日の利用者数が 5000 人を超えた地点を表示します。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.948766, lng: -87.691497},
zoom: 12
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'address',
from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
where: 'ridership > 5000'
}
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.948766, lng: -87.691497},
zoom: 12
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'address',
from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
where: 'ridership > 5000'
}
});
layer.setMap(map);
}
フュージョン テーブルのスタイル
フュージョン テーブル レイヤのコンストラクタは FusionTablesLayerOptions の styles パラメータも受け取り、マーカーやポリゴンに対して色やストロークの幅、不透明度などのスタイルを適用します。マーカー アイコンは、サポートされているマップのマーカー名やアイコン名でも指定できます。
注: スタイルを適用できるフュージョン テーブル レイヤは、各マップにつき 1 つだけです。このレイヤには最大 5 つまでスタイルを適用できます。
以下は styles パラメータで使用する構文です。
styles: [{
where: 'column_name condition',
markerOptions: {
iconName: "supported_icon_name"
},
polygonOptions: {
fillColor: "#rrggbb",
strokeColor: "#rrggbb",
strokeWeight: "int"
},
polylineOptions: {
strokeColor: "#rrggbb",
strokeWeight: "int" }
}, {
where: ...
...
}]
このスタイルは、フュージョン テーブルのウェブ インターフェースで指定されたどのスタイルよりも優先して適用されます。レイヤのコンストラクタに指定されたスタイルは、リスト化された順番で適用されます。なお、複数のルールに適合する地物には、最後に適合したスタイルが適用されます。
すべての地物に適用するデフォルトのスタイルを作成するには、where 句を含まないスタイルを作成します。
styles: [{
markerOptions: {
iconName: "large_green"
}
}]
次の例は、以下の条件に従って表示します。
- デフォルトのスタイルとして、ポリゴンはすべて緑色、不透明度レベルは 0.3 とします。
- 「birds」列が 300 を超えるポリゴンはすべて青色にし、デフォルトのスタイルで設定された不透明度レベルは保持します。
- 「population」列が 5 を超えるポリゴンは、不透明度レベルをすべて 1.0 に設定し、fillColor の値は保持します。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -25, lng: 133},
zoom: 4
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
},
styles: [{
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}
}, {
where: 'birds > 300',
polygonOptions: {
fillColor: '#0000FF'
}
}, {
where: 'population > 5',
polygonOptions: {
fillOpacity: 1.0
}
}]
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -25, lng: 133},
zoom: 4
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
},
styles: [{
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}
}, {
where: 'birds > 300',
polygonOptions: {
fillColor: '#0000FF'
}
}, {
where: 'population > 5',
polygonOptions: {
fillOpacity: 1.0
}
}]
});
layer.setMap(map);
}
フュージョン テーブルのヒートマップ
フュージョン テーブルではヒートマップも限定的にサポートしています。ヒートマップとは、カラー パレットを使用して対応する位置の密度を表現する手法です。最新のヒートマップでは、赤（密）から緑（疎）へのグラデーションを使用して、関連する位置の相対分布を表現します。ヒートマップを有効にするには、フュージョン テーブル レイヤの FusionTablesLayerOptions の heatmap パラメータを enabled: true に設定します。
注: フュージョン テーブルのヒートマップはサーバー側でレンダリングされます。クライアント側でレンダリングしたい場合は、ヒートマップ レイヤを代わりに使用してください。
次の例は、ヒートマップを使用して歴史的な大地震に関するデータを表示します。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 10, lng: -140},
zoom: 3
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'location',
from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 10, lng: -140},
zoom: 3
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'location',
from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
ご不明な点がありましたら、Google の