複数のFusion Tablesを一つの地図上に重ねて表示する。

最終更新日

残念ながら、Fusion Tablesは廃止されることになりました。

Notice: Google Fusion Tables Turndown – Fusion Tables Help


下記は群馬県のバスルートデータとバス停留所データのFusion Tablesを重ねて表示した例。

FusionTables

example

以前も紹介したことがあるFusion Tables。手軽に地理情報の視覚化が行えて非常に便利なのですが、Googleドライブの中では基本一つの地図に1種類のデータしか表示できません。

Google Maps APIコードエクスポート機能を使うと、複数のFusion Tablesを組み合わせて使うことができます。

サンプル

Google Maps APIコード出力

「Tools」メニューから「Publish」を選択し「Get HTML and JavaScript」をクリックするとGoogle Maps APIコードが取得できます。
Fusion Tablesエクスポート

出力されるコードにはGoogle Mapsの初期化などが含まれますが、Fusion Tablesを表示しているのは以下の部分となります。

google.maps.FusionTablesLayerで指定したFusion Tablesを生成しGoogle Maps上に表示しているわけですが、この部分をコピペして一つのGoogle Mapsに追加すれば複数のFusion Tablesを1つの地図上に重ねて表示できます。
(一部webixを使ってます。divエレメントを生成しているだけです。)

FusionTablesLayerのsetQueryメソッドを使って表示するデータの絞り込みなども行えるのですが、それについてはまた後日書きます。