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>