情報ウィンドウを表示する
マーカーをクリックした時に、その地点に関する情報をウィンドウ表示させることもできます。これには、<ui-gmap-markers>要素の配下で<ui-gmap-windows>要素を利用します。以下に、具体的な例を見てみましょう。
リスト6 map_window.html
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
<ui-gmap-markers models="map.markers" coords="'self'" click="onclick">
<!-- （1）情報ウィンドウを表示 -->
<ui-gmap-windows show="show">
<div ng-non-bindable>{{subject}}<hr />{{overview}}</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
リスト7 map_window.js
angular.module('myApp', [ 'uiGmapgoogle-maps' ])
...中略...
.controller('MyController', ['$scope', 'uiGmapGoogleMapApi',
function($scope, uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = {
center: { latitude: 35.681382, longitude: 139.766084 },
zoom: 12,
options: {
mapTypeId: google.maps.MapTypeId.HYBRID
},
// マーカーの座標／タイトル情報を準備
markers: [
{
id: 1,
latitude: 35.681382,
longitude: 139.766084,
subject: '東京駅',
overview: '東京の玄関口。ターミナル駅です。',
show: false
},
{
id: 2,
latitude: 35.628856,
longitude: 139.738854,
subject: '品川駅',
overview: 'リニア中央新幹線の始発駅になる予定です。',
show: false
}
]
};
angular.forEach($scope.map.markers, function(marker, index) {
// （2）マーカーの表示／非表示を切り替え
marker.onclick = function() {
marker.show = !marker.show;
};
});
});
}]);
<ui-gmap-windows>要素の配下には、情報ウィンドウに表示すべきコンテンツ（テンプレート）を指定します（1）。テンプレートには、上位のマーカーに紐づけられたモデルのプロパティが割り当てられます。
また、この際、事前にテンプレートが処理されてしまわないよう、ng-non-bindableディレクティブを付与している点にも注意してください。
マーカークリック時のウィンドウの表示／非表示を制御しているのは、（2）のclickイベントリスナーです。クリックの都度、モデル（変数marker）のshowプロパティを反転させることで、ウィンドウの表示／非表示を切り替えています。showプロパティは、<ui-gmap-windows>要素のshow属性に紐づけています。
まとめ
本稿では、GoogleマップをAngularJSアプリから操作するAngular Google Mapsを紹介しました。Google Maps APIをそのまま利用することもできますが、Angular Google Mapsを利用することで、より少ないコードで地図を操作できます。$http／$resourceサービスと連携して、外部から取得した座標情報などをアプリに反映する際などには力を発揮するはずです。
次回は、UI Bootstrapなどを利用した日付／時刻の入力、月別カレンダーの表示などについて紹介する予定です。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
