AngularJS Google Map指令 - マーカーClickイベントでInfoWindowを表示中にエラーが発生しました

Question

マーカーアイコンを使用して現在の位置を表示し、インフォウィンドウに座標を表示するために、AngngJS Google Mapディレクティブを使用してAgngularJs Google Mapアプリケーションを開発していますクリックした

HTML：

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"> 
    <ui-gmap-marker coords="vm.marker.coords" options="vm.marker.options" events="vm.marker.events" idkey="vm.marker.id"> 
    </ui-gmap-marker> 
    <ui-gmap-window show="false" coords="vm.infoWin.coords" options="vm.infoWin.infoWinOptions"> 
    </ui-gmap-window> 
</ui-gmap-google-map> 

コントローラー：

uiGmapGoogleMapApi.then(function (maps) { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function (position) { 
     $scope.map = { center: { latitude: position.coords.latitude, longitude: position.coords.longitude }, zoom: 15 }; 
     $scope.options = { draggable: false, scrollwheel: false }; //Map 

     vm.marker = { 
     id: 1, 
     coords: { 
        latitude: position.coords.latitude, 
        longitude: position.coords.longitude 
       }, 
     options: { 
        draggable: false, 
        //labelContent: 'You are here', 
        //labelClass: "marker-labels" 
        }, 
     events: { 
        click: function() { 
        showInfoWindow(); 
       } 
      } 
    }; 

    function showInfoWindow() { 
     vm.infoWin = { 
        coords: { 
          latitude: position.coords.latitude, 
          longitude: position.coords.longitude 
          }, 

        infoWinOptions: { 
            visible: true, 
            content: 'Latitude: ' + position.coords.latitude + ', ' + 'Longitude: ' + position.coords.longitude, 
            pixelOffset: { height: -32, width: 0 } 
            } 
         } 
        } 
       }) 
      } 
     }) 

しかし、情報ウィンドウのみマーカーアイコン上の最初の2回のクリックのために表示されています。 Google Chromeのコンソールウィンドウには、すべてのマーカーをクリックして、このエラーメッセージが表示されます。

Uncaught TypeError: Cannot set property 'opacity' of undefined

at Object.maybeRepaint (angular-google-maps.min.js:7)
at .Me. (angular-google-maps.min.js:7)
at Object..z.trigger (js:95)
at Ke._.k.trigger (js:113)
at .JF. (maps.googleapis.com/maps-api-v3/api/js/26/10/infowindow.js:3)
at Object..z.trigger (js:95)
at _.JF. (maps.googleapis.com/maps-api-v3/api/js/26/10/util.js:133)
at .Zs..k.Jh (maps.googleapis.com/maps-api-v3/api/js/26/10/common.js:204)

私は、これはマーカーのClickイベントを処理するための正しい方法であるかどうかを確認していません。この問題を解決するのを手伝ってください。

Answer 1

Infoウィンドウの内容が少し異なる指定する必要があります

1）コンテンツを経由して設定することができませんでしたので、最初に我々は（infoWinOptionsオブジェクトは、その目的のために使用すべきではない情報ウィンドウのコンテンツを格納するプロパティを導入する必要がありますこのようなことバインドvm.marker.content

2）、その後：options例えばui-gmap-windowディレクティブの属性）、

<ui-gmap-window coords="vm.infoWin.coords" show="false" options="vm.infoWin.infoWinOptions"> 
    <span> {{vm.marker.content}}</span> 
</ui-gmap-window> 

Demo