Fusionテーブルに登録したデータを地図上にマーカーとして表示する方法についてです。
デモとコードサンプルはこちら。
（１）Fusionテーブルにデータ登録
①Fusion Tables ウェブ インターフェースにアクセス
http://www.google.com/drive/apps.html#fusiontables
②”Fusion Tables”のCreateを押下
③”Import new table”ウィンドウ表示。
ファイルをアップロードする事も出来るようですが、ここでは”Create empty table”を選択しました。
④”Text”、”Number”、”Location”、”Date”の入力画面が出てくるので、”Location”にカンマ区切りで緯度と経度を入力し、その他のカラムも必要に応じて入力します。入力後”Save”ボタン押下
⑤データの入力が終わったら”Share”ボタン押下
⑥”Share settings”でアクセス設定を”Anyone with the link”に変更してSaveボタン押下
⑦”File”→”About this table”を選択
Idの値を取得します。
（２）Fusionテーブルに登録したデータを地図上にマーカーとして表示
デモとコードサンプルはこちら。
１）サンプルコードの仕様
ここでは、下記仕様でサンプルコードを作成しました。
・上記（１）の手順で東京駅近辺の３つ位置情報を登録
登録項目は、デフォルトのText、Number、Location、Dateと各位置情報を識別するためのType（公園、映画館など）の情報を登録
・登録したデータを地図上にマーカーとして表示する
・マーカーアイコンの形状をType（公園、サイクリングなど）の値によって切り分ける。
２）サンプルコードの内容
①HTMLにlayerタグを記述
<layer type=”FusionTablesLayer” show=”map.fusionlayer.showFusionTables” options=”map.fusionlayer.options”></layer>
type属性にlayerのタイプを指定し、オプションはスクリプトから取得します。
②スクリプトにFusionTablesLayerオブジェクトのオプションを設定
○queryオプション
queryオプションでselectに位置情報を指定するテーブルカラム名、fromに（１）の⑦で取得したIDを指定します。
query: {
select: ‘\’Location\”,
from: ‘１）⑦で取得したIDを指定’
}
○styleオプション
・markerOptions属性でマーカーアイコンを指定します。
・where属性を使って、デフォルトのアイコンは緑の丸、テーブルの”type”カラムが”公園”と”サイクリング”の場合は、異なるアイコンを使用するように設定しています。
アイコンの名前は下記サイトで確認します。
https://www.google.com/fusiontables/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA#map:id=3
styles: [{
markerOptions: {
iconName: "large_green"
}
}, {
where: "type = '公園'",
markerOptions: {
iconName: "parks"
}
}, {
where: "type = 'サイクリング'",
markerOptions: {
iconName: "cycling"
}
}]