Google Maps pour AngularJS - InfoWindow n'est pas positionné correctement lorsque le marqueur clique

Question

J'ai une carte qui utilise Google Maps pour AngularJS, elle a deux marqueurs, et chaque marqueur montre une infoWindow avec des données.

La première fois que je clique sur un marqueur, tout fonctionne correctement. Si je clique sur le second marqueur, fonctionne toujours correctement. Mais lorsque je clique à nouveau sur le premier marqueur, infoWindow ne change pas de position: les données associées au premier marqueur sont affichées sur une infoWindow sur le second marqueur, et non sur la première.

Qu'est-ce qui peut causer ce problème?

Mon code 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> 

L'événement click associé à un marqueur:

$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}; 

Le contenu de 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 
}; 

Si j'utilise le bouton "x" pour fermer le marqueur, ce problème ne se produit plus. Mais je ne veux pas que l'utilisateur ait besoin de fermer manuellement l'infoWindow.

Toute aide serait appréciée! Merci

EDIT: J'inclure mon code 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

Je n'ai pas pu reproduire le problème que vous rencontrez, mais l'exemple suivant montre comment afficher la fenêtre d'information sur clic marqueur:

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>