ng-map cluster with infowindow

Question

I'm trying to display infowindow on clusters. My problem is that the infowindow is display far than the cluster and not on it.

This is how I have added the click event to the cluster:

  $scope.markerCluster = new MarkerClusterer(map, markers);
                google.maps.event.addListener($scope.markerCluster, 'clusterclick', function(cluster) {
                    $scope.map.showInfoWindow('bar', $scope.markerCluster);

                    console.log("cluster click");
                });

Answer 1

To position info window over marker cluster setPosition function needs to be explicitly invoked, for example:

google.maps.event.addListener($scope.markerCluster, 'clusterclick', function (cluster) {

     var infoWindow = $scope.map.infoWindows["myInfoWindow"]; //get infoWindow instance
     infoWindow.setPosition(cluster.getCenter()); //<-set position 
     $scope.map.showInfoWindow('myInfoWindow', cluster);

  });

Example

angular.module('mapApp', ['ngMap'])
  .controller('mapController', function ($scope, NgMap) {

    NgMap.getMap().then(function (map) {
      $scope.map = map;
      $scope.initMarkerClusterer();
    });

    $scope.cities = [
      { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
      { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
      { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
      { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
      { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
    ];



    $scope.initMarkerClusterer = function () {
      var markers = $scope.cities.map(function (city) {
        return $scope.createMarker(city);
      });
      var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' , zoomOnClick: false };
      $scope.markerCluster = new MarkerClusterer($scope.map, markers, mcOptions);
      google.maps.event.addListener($scope.markerCluster, 'clusterclick', function (cluster) {

         //generate infoWindow content
         var cities = cluster.getMarkers().map(function(m){
             return m.title;
         });
         $scope.content = cities.join(",");
         
         var infoWindow = $scope.map.infoWindows["myInfoWindow"]; //get  infoWindow instance
         infoWindow.setPosition(cluster.getCenter());
         $scope.map.showInfoWindow('myInfoWindow', cluster);
         
      });
    };


    $scope.createMarker = function (city) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(city.pos[0], city.pos[1]),
        title: city.name
      });
      google.maps.event.addListener(marker, 'click', function () {
        $scope.content = marker.title;
        $scope.map.showInfoWindow('myInfoWindow', this);
      });
      return marker;
    }

  });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
  <ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
    <info-window id="myInfoWindow">
      <div ng-non-bindable>
        <h4>{{content}}</h4>
      </div>
    </info-window>
  </ng-map>
</div>