Googleマップに複数のマーカーを表示する（angular-google-maps）
AngularJSのGoogleマップ用ライブラリ「angular-google-maps」を使って、複数のマーカーを地図上に表示する方法です。ライブラリを使うために必要なものについては、「WebサイトにGoogleマップを埋め込む」の記事を確認して下さい。
目次
- コード
- 動作確認
- 参考リンク
コード
関係ない箇所については極力削除しているので、適宜、補完して下さい。
◆html
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" ng-if="map">
<ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
◆javascript
myApp.controller('exampleCtrl', function ($scope, uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function(maps) {
var data = [
{ lat: 35.681167, lng: 139.767052, title: "東京駅" },
{ lat: 35.693318, lng: 139.749885, title: "日本武道館" },
{ lat: 35.685175, lng: 139.7528, title: "皇居" }
];
$scope.map = {
center: { latitude: data[0].lat, longitude: data[0].lng },
zoom: 13,
options: {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
};
$scope.markers = [];
for (var i = 0; i < data.length; i++){
$scope.markers.push({
id: i,
coords: { latitude: data[i].lat, longitude: data[i].lng },
options: { title: data[i].title }
});
}
});
});
「mapTypeId」には「ROADMAP」以外に「HYBRID」「SATELLITE」「TERRAIN」といったものが設定可能です。
マーカーのoptionsに設定した「title」は、地図上に表示されたマーカーにカーソルを合わせると表示されます。
ライブラリに「ui-gmap-markers」という複数マーカーに対応したディレクティブがありますが、うまく動作させることができなかったので、ng-repeatで「ui-gmap-marker」ディレクティブを複数作成するようにしています。