AngularJSを使ってGoogleマップ（３）マーカーをクリックして情報ウィンドウを表示

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

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

サンプルコードの説明

　
１）マーカーの定義（スクリプト）
　
①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();
    };
});