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" events="marker.events" 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 }
});
}
var infowindow = new google.maps.InfoWindow();
$scope.openMarkerInfo = function(marker, eventName, args){
infowindow.setContent("<b>" + marker.getTitle() + "</b><br/>緯度：" + marker.getPosition().lat() + "<br/>経度：" + marker.getPosition().lng());
infowindow.open($scope.map, marker);
};
});
});
上記のコードで表示できる情報ウィンドウの数は一つだけとなります。
情報ウィンドウのコンテンツにはHTMLタグが使用可能です。