VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

AngularJSを使ってGoogleマップ(12)Fusionテーブルのデータを地図上にマーカーとして表示

Fusionテーブルに登録したデータを地図上にマーカーとして表示する方法についてです。

デモとコードサンプルはこちら
 

(1)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の値を取得します。
 

(2)Fusionテーブルに登録したデータを地図上にマーカーとして表示


 
デモとコードサンプルはこちら
 
1)サンプルコードの仕様
 
ここでは、下記仕様でサンプルコードを作成しました。
 
・上記(1)の手順で東京駅近辺の3つ位置情報を登録
登録項目は、デフォルトのText、Number、Location、Dateと各位置情報を識別するためのType(公園、映画館など)の情報を登録
 
・登録したデータを地図上にマーカーとして表示する
 
・マーカーアイコンの形状をType(公園、サイクリングなど)の値によって切り分ける。
 
2)サンプルコードの内容
 
①HTMLにlayerタグを記述
 
<layer type=”FusionTablesLayer” show=”map.fusionlayer.showFusionTables” options=”map.fusionlayer.options”></layer>
 
type属性にlayerのタイプを指定し、オプションはスクリプトから取得します。
 
②スクリプトにFusionTablesLayerオブジェクトのオプションを設定
 
○queryオプション
queryオプションでselectに位置情報を指定するテーブルカラム名、fromに(1)の⑦で取得したIDを指定します。
 
query: {
 select: ‘\’Location\”,
 from: ‘1)⑦で取得した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マップの他の記事の目次

モバイルバージョンを終了