AngularJSを使ってGoogleマップ（１９）パノラミオ（Panoramio）の写真をタグでフィルタして表示

テキストボックスに入力したタグでフィルタしてパノラミオ（Panoramio）の写真をGoogleマップに表示するサンプルコードを作成しました。

（１）サンプルコード
　
デモ表示へ
①HTML本文

<div ng-controller="MyCtrl">
<div class="row">
  <div class="col-sm-12">
    <google-map 
      id="map-canvas"
      center="map.center"
      zoom="map.zoom"
      draggable="true"
      options="map.options"
      control="map.control"
      events="map.events"
    >
    </google-map>
  </div>
  <div id="filter">
    <input ng-model="tag" type="text" placeholder="Tokyo">
    <button ng-click="filterTag(tag)">Filter on Tag</button>
  </div>
</div>
</div>

②スクリプト（js/map19.js）

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

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

  var panoramioLayer = new google.maps.panoramio.PanoramioLayer();

  angular.extend($scope, {
    map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 15,
      control: {},
      events: { 
        projection_changed: function (map, eventName, originalEventArgs) {
          panoramioLayer.setMap(map);
          map.controls[google.maps.ControlPosition.TOP_CENTER].push(
            document.getElementById('filter')
          );
        }
      }
    }
  });
  $scope.filterTag = function(tag) {
    panoramioLayer.setTag(tag);
  };
});

③CSS

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

（２）サンプルコードの内容
　
Panoramioの写真を地図上に表示するのは前回と同じです。タグを使ってフィルターする部分のみ示します。
　
１）タグ入力用のテキストボックスとボタンを地図上に表示
　
①テキストボックスとボタンを定義
　
<div id=”filter”>
　<input ng-model=”tag” type=”text” placeholder=”Tokyo”>
　<button ng-click=”filterTag(tag)”>Filter on Tag</button>
</div>
　
②上記テキストボックスとボタンを地図上に表示
　
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
　document.getElementById(‘filter’)
);
　
２）入力されたタグを使ってフィルタ
　
テキストボックスのボタンをクリックすると入力された値を取得し、PanoramioLayerオブジェクトのsetTag()メソッドを実行します。
　
このメソッドによってタグに一致する写真のみが地図上に表示されます。
　
$scope.filterTag = function(tag) {
　panoramioLayer.setTag(tag);
};
　
AngularJS、Googleマップの他の記事の目次