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"
    }
  }]

　
AngularJS、Googleマップの他の記事の目次

関連記事の目次