Google maps for AngularJS - InfoWindow is not set in correct position when marker clicked

Question

I have a map that uses Google Maps for AngularJS, it has two markers, and every marker shows a infoWindow with data.

The first time I click on a marker, everything works correctly. If I click the second marker, still works correctly. But when I click the first marker again, the infoWindow does not change its position: the data associated to the first marker is shown on a infoWindow over the second marker, and not over the first.

What can cause this problem?

My html code:

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

The click event associated to a marker:

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

The content of 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
};

If I use the button "x" to close the marker, this issue does not happen anymore. But I don't want the user to need to close manually the infoWindow.

Any help would be appreciated! Thanks

EDIT: I include my mapOptions code:

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

Answer 1

I was not able to reproduce the issue you are experiencing but the following example demonstrates how to display info window on marker click:

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>