AngularJSを使ってGoogleマップ(3)マーカーをクリックして情報ウィンドウを表示

地図上に表示されているマーカーをクリックすると情報ウィンドウが表示されるようにします。

デモとコードサンプルはこちら
 

サンプルコードの説明


 
1)マーカーの定義(スクリプト)
 
①ui-gmap-markersタグにclick属性追加(HTML)
 
マーカーをクリックした際に実行する関数を指定します。この関数でウィンドウの非表示から表示に変更します。

<ui-gmap-markers models="map.markers" coords="'self'" click="'onClicked'" >

 
②ui-gmap-markersタグ内にui-gmap-windowsディレクティブ追加(HTML)
 
ui-gmap-markersタグ内にui-gmap-windowsディレクティブ追加し、show属性とcloseClick属性でウィンドウの表示、表示したウィンドウのクローズを制御します。

<ui-gmap-windows show="'showWindow'" closeClick="'closeClick'">
  <p ng-non-bindable><strong>{{ title }}</strong><br />
    latitude,longitude {{ latitude | number:4 }}, {{ longitude | number:4 }}
  </p>
</ui-gmap-windows>

 
③ウィンドウを表示する関数、表示されているウィンドウを閉じる関数を定義(スクリプト)

angular.forEach($scope.map.markers, function (marker) {
    marker.closeClick = function () {
        marker.showWindow = false;
        $scope.$apply();
    };
    marker.onClicked = function () {
        marker.showWindow = true;
        $scope.$apply();
    };
});
関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください