地図上の地点にマーカーを立てる
地図には特定地点を表すためのマーカーを立てることもできます。たとえば以下は、先ほど準備した地図に対して、スコープオブジェクトで定義した複数の地点に対して、マーカーを付与する例です。
リスト4 map_marker.html
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"> <!-- （1）マーカーを定義 --> <ui-gmap-markers models="map.markers" coords="'self'"> </ui-gmap-markers> </ui-gmap-google-map>
リスト5 map_marker.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
},
{
id: 2,
latitude: 35.628856,
longitude: 139.738854
}
]
};
});
}]);
地図にマーカーを立てるには、<ui-gmap-google-map>要素の配下で、<ui-gmap-markers>要素を利用してください（1）。<ui-gmap-markers>要素で利用できる属性には、以下のようなものがあります。
| 属性 | 概要 |
|---|---|
| models | マーカーの情報を表すオブジェクト（モデル）群 |
| idkey | モデルを一意に識別するidを表すプロパティ名（デフォルトはid） |
| coords | マーカーの座標（latitude：緯度、longitude：経度） |
| click | マーカーをクリックした時に実行すべき処理 |
coords属性で指定したselfは予約語で、modelsパラメーターで指定されたモデルに含まれるlatitude／longitudeプロパティを座標として利用しなさい、という意味です。
