google map info window shows in top left corner

Question

When i click on a marker, the info window shows in top left corner but it should display at top of the marker.

this is image of the situation : https://i.sstatic.net/GHHDE.png

this element style should be set left and top css property dynamic for every marker's infoWindow. but if you look at generated element, you see there is no left or top css property...

<div class="ng-map-info-window" 
     style="cursor: default; 
            position:absolute; 
            width: 110px; 
            height: 84px;>

any idea ?

------ update (insert code)

this is my angularjs controller for show and hide the info window

vm.showDetail = function (e, p) {
    vm.p = p;
    vm.map.showInfoWindow('foo-iw', p.locationId);
};

vm.hideDetail = function () {
    vm.map.hideInfoWindow('foo-iw');
};

and this is my ui

<marker id='{{p.locationId}}' 
                   ng-repeat="p in locations track by $index" 
                   position="[{{p.locationX}},{{p.locationY}}]" 
                   on-click="vm.showDetail(p)">
                <marker>     
<info-window id="foo-iw">
           <div ng-non-bindable="">
                id: {{vm.p.locationId}}<br/>
                name: {{vm.p.locationName}}<br/> 
                <a href="#" ng-click="vm.clicked()">Click Here</a>
           </div>
     </info-window>

Answer 1

The info window is not positioned properly since showInfoWindow function accepts marker object as the second parameter, so replace the line:

vm.map.showInfoWindow('foo-iw', p.locationId);

with:

vm.map.showInfoWindow('foo-iw', this);

I've also fixed a couple of typos in the example you posted, here is a fixed version:

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function(NgMap) {
        var vm = this;

        NgMap.getMap().then(function(map) {
            vm.map = map;
        });
        vm.locations = [
            { locationId: 1, locationName: 'Oslo', locationX: 59.923043, locationY: 10.752839 },
            { locationId: 2, locationName: 'Stockholm', locationX: 59.339025, locationY: 18.065818 },
            { locationId: 3, locationName: 'Copenhagen', locationX: 55.675507, locationY: 12.574227 },
            { locationId: 4, locationName: 'Berlin', locationX: 52.521248, locationY: 13.399038 },
            { locationId: 5, locationName: 'Paris', locationX: 48.856127, locationY: 2.346525 }
        ];
        
        /*$scope.showCity = function(event, city) {
            $scope.selectedCity = city;
            $scope.map.showInfoWindow('myInfoWindow', this);
        };*/

        vm.showDetail = function (e, p) {
          vm.p = p;
          //vm.map.showInfoWindow('foo-iw', p.locationId);
          vm.map.showInfoWindow('foo-iw', this);
        };

        vm.hideDetail = function () {
           vm.map.hideInfoWindow('foo-iw');
        };

    });

<link href="style.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController as vm">
    <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
        
        <marker id='{{p.locationId}}' 
                   ng-repeat="p in vm.locations track by $index" 
                   position="[{{p.locationX}},{{p.locationY}}]" 
                   on-click="vm.showDetail(p)">
        </marker>     
        <info-window id="foo-iw">
           <div ng-non-bindable="">
                id: {{vm.p.locationId}}<br/>
                name: {{vm.p.locationName}}<br/> 
                <a href="#" ng-click="vm.clicked()">Click Here</a>
           </div>
        </info-window>
    </ng-map>
</div>