Google Maps for AngularJS - マーカーがクリックされたときにInfoWindowが正しい位置に設定されていません

Question

私はGoogle Maps for AngularJSを使用し、2つのマーカーを持ち、すべてのマーカーに情報ウィンドウを表示します。

初めてマーカーをクリックすると、すべて正常に動作します。 2番目のマーカーをクリックしても、正しく動作します。しかし、最初のマーカを再度クリックすると、インフォウィドウはその位置を変更しません。最初のマーカに関連付けられたデータは、2番目のマーカの上のinfoWindowに表示され、最初のマーカには関連付けられません。

この問題の原因は何ですか？

私のhtmlコード：

<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'> 
     <ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers> 
     <ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak> 
      //SOME CODE HERE 
     </ui-gmap-window> 
    </ui-gmap-google-map> 

マーカーに関連したクリックイベント：

$scope.map = { center: { latitude: 43, longitude: -8.3 }, zoom: 8, control: {}, markerEvents: { 
    click: function(marker){ 
     if(marker.model.title != USER_LOCATION){ 
      $scope.onClick(marker.model); 
      $scope.mapOptions.markers.selected = marker.model; 
     } 
    } 
}, options: $scope.mapOptions}; 

windowOptionsの内容：

$scope.windowOptions = { 
    show: false, 
    boxClass: "infobox", 
    boxStyle: { 
     backgroundColor: "transparent", 
     border: "1px solid #C7CECE", 
     borderRadius: "5px", 
     width: "85%" 
    }, 
    disableAutoPan: false, 
    maxWidth: 0, 
    infoBoxClearance: new google.maps.Size(1, 1), 
    pixelOffset: new google.maps.Size(-175, -250), 
    zIndex: null, 
    /*closeBoxMargin: "10px", 
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",*/ 
    isHidden: false, 
    pane: "floatPane", 
    enableEventPropagation: false 
}; 

私はボタンを使用している場合は "×"マーカーを閉じるには、この問題はもう発生しません。しかし、私はユーザーがinfoWindowを手動で閉じる必要はありません。

助けていただけたら幸いです！おかげ

編集：私は私のmapOptionsコードが含ま：

$scope.mapOptions = { 
    minZoom: 3, 
    zoomControl: false, 
    draggable: true, 
    navigationControl: false, 
    mapTypeControl: false, 
    scaleControl: false, 
    streetViewControl: false, 
    disableDoubleClickZoom: false, 
    keyboardShortcuts: true, 
    markers: { 
     selected: {} 
    } 
}; 

Answer 1

を私はあなたが経験している問題を再現することができませんでしたが、次の例では、マーカーのクリックで情報ウィンドウを表示する方法を示します

angular.module('appMaps', ['uiGmapgoogle-maps']) 
 
    .controller('mapCtrl', function($scope, uiGmapGoogleMapApi) { 
 

 
     $scope.places = [ 
 
      { idKey: 1, name: "Brisbane", coords: { latitude: -33.867396, longitude: 151.206854 } }, 
 
      { idKey: 2, name: "Sydney", coords: { latitude: -27.46758, longitude: 153.027892 } }, 
 
      { idKey: 3, name: "Perth", coords: { latitude: -31.953159, longitude: 115.849915 } } 
 
     ]; 
 

 
     var USER_LOCATION = ''; 
 

 

 
     uiGmapGoogleMapApi.then(function(maps) { 
 
      $scope.map = { 
 
       center: { latitude: -30, longitude: 135.0 }, 
 
       zoom: 4, 
 
       control: {}, 
 
       markerEvents: { 
 
        click: function(marker) { 
 
         if (marker.model.title != USER_LOCATION) { 
 
          $scope.onClick(marker.model); 
 
          $scope.mapOptions.markers.selected = marker.model; 
 
         } 
 
        } 
 
       }, 
 
       options: $scope.mapOptions 
 
      }; 
 

 

 
      $scope.windowOptions = { 
 
       show: false, 
 
       pixelOffset: new google.maps.Size(0, -32), 
 
       /*boxClass: "infobox", 
 
       boxStyle: { 
 
        backgroundColor: "transparent", 
 
        border: "1px solid #C7CECE", 
 
        borderRadius: "5px", 
 
        width: "85%" 
 
       }, 
 
       disableAutoPan: false, 
 
       maxWidth: 0, 
 
       infoBoxClearance: new google.maps.Size(1, 1), 
 
       zIndex: null, 
 
       isHidden: false, 
 
       pane: "floatPane", 
 
       enableEventPropagation: false*/ 
 
      }; 
 
     }); 
 

 
     $scope.mapOptions = { 
 
      minZoom: 3, 
 
      zoomControl: false, 
 
      draggable: true, 
 
      navigationControl: false, 
 
      mapTypeControl: false, 
 
      scaleControl: false, 
 
      streetViewControl: false, 
 
      disableDoubleClickZoom: false, 
 
      keyboardShortcuts: true, 
 
      markers: { 
 
       selected: {} 
 
      } 
 
     }; 
 

 

 

 

 

 
     $scope.onClick = function(data) {  
 
      $scope.windowOptions.show = true; 
 
     }; 
 

 
     $scope.closeClick = function() { 
 
      $scope.windowOptions.show = false; 
 
     }; 
 

 
    });

.angular-google-map-container { height: 480px; }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script> 
 

 
<div ng-app="appMaps" ng-controller="mapCtrl"> 
 
    <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'> 
 
     <ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers> 
 
     <ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak> 
 
      Some info goes here 
 
     </ui-gmap-window> 
 
    </ui-gmap-google-map> 
 
</div>