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本文

<div ng-controller="MyCtrl">
<div class="row">
  <div class="col-sm-6">
    <google-map 
      id="map-canvas"
      center="map.center"
      zoom="map.zoom"
      draggable="true"
      options="map.options"
      events="map.events"
    >
      <layer type="FusionTablesLayer" show="map.fusionlayer.showFusionTables" options="map.fusionlayer.options"></layer>
    </google-map>
  </div>
  <div class="col-sm-6">
  </div>
</div>
</div>

②スクリプト(js/map12.js)

var mapApp = angular.module('googleMapApp', ['google-maps','ui.bootstrap']);

mapApp.controller("MyCtrl", function ($scope) {

  angular.extend($scope, {
    map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 15,
      fusionlayer: {
        showFusionTables: true,
        options: {
          query: {
            select: '\'Location\'',
            from: '(1)⑦で取得したID'
          },
          styles: [{
            markerOptions: {
              iconName: "large_green"
            }
          }, {
            where: "type = '公園'",
            markerOptions: {
              iconName: "parks"
            }
          }, {
            where: "type = 'サイクリング'",
            markerOptions: {
              iconName: "cycling"
            }
          }]
        }
      }
    }
  });
});

③CSS

@import url('bootstrap/css/bootstrap.css');
.angular-google-map-container {
  height: 400px;
}

 
(3)サンプルコードの内容
 
1)HTMLにlayerタグを記述
 
<layer type=”FusionTablesLayer” show=”map.fusionlayer.showFusionTables” options=”map.fusionlayer.options”></layer>
 
type属性にlayerのタイプを指定し、オプションはスクリプトから取得します。
 
2)スクリプトに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マップの他の記事の目次

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です