title: AngularJS - ngMap custom marker clusterer map + infowindow
body: <p>I've been struggling to get this working for quite some time now. So, here is what I'm trying to achieve.</p>
  
  <ol>
  <li>Map with cluster.</li>
  <li>cluster markers should be custom.</li>
  <li>On click of marker opens a customized infowindow.</li>
  </ol>
  
  <p><strong>Things that I've managed to do are:</strong> </p>
  
  <ol>
  <li>Map with custom clusters.</li>
  <li>Customize infowindow.</li>
  </ol>
  
  <p><strong>Issues I'm facing are:</strong></p>
  
  <ol>
  <li><code>onClick</code> of the cluster it creates default markers, not custom markers.</li>
  <li>I'm not able to assign a unique <code>id</code> to each marker so that the infowindow opens right above the marker.</li>
  <li>Even if I add <code>id's</code> manually, infowindow opens a bit off from the marker. </li>
  </ol>
  
  <p>To give a clear picture of what I'm trying to achieve I'll add an image of the design I'm trying to achieve.
  <a href="https://i.stack.imgur.com/Hec75.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hec75.png" alt="enter image description here"></a></p>
  
  <p>The below code works on my local but for some reason <code>ng-non-bindable</code> is causing an issue in the below snippet. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', ['ngMap']);
  
  app.controller('mapController', function($http, $scope, $interval, NgMap) {
    $scope.positions = [];
    $scope.dynMarkers = [];
  
  
    $scope.allProperties = [{
        "title": "Unit 25",
        "latitude": 54.779951,
        "longitude": 9.334164
      },
      {
        "title": "Unit 21",
        "latitude": 47.209613,
        "longitude": 15.991539
      },
      {
        "title": "Unit 41",
        "latitude": 51.97539,
        "longitude": 7.596962
      },
      {
        "title": "Unit 87",
        "latitude": 54.779951,
        "longitude": 9.334164
      },
      {
        "title": "Unit 59",
        "latitude": 47.414847,
        "longitude": 8.23485
      },
      {
        "title": "Unit 70",
        "latitude": 47.658028,
        "longitude": 9.159596
      },
      {
        "title": "Unit 9",
        "latitude": 47.525927,
        "longitude": 7.68761
      },
      {
        "title": "Unit 31",
        "latitude": 50.85558,
        "longitude": 9.704403
      }
    ];
  
  
    NgMap.getMap('propertyMap').then(function(map) {
      var bounds = new google.maps.LatLngBounds();
      for (var k in map.customMarkers) {
        var cm = map.customMarkers[k];
        $scope.dynMarkers.push(cm);
        bounds.extend(cm.getPosition());
      };
  
      $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {
        imagePath: ''
      });
      map.setCenter(bounds.getCenter());
      map.fitBounds(bounds);
  
      $scope.sameLocationUnits = function(event, unit) {
        $scope.map.showInfoWindow('propertyInfoWindow', unit.id);
        $scope.unitInfo = unit;
      };
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ng-map-info-window {
   width: 300px !important;
    background-color: #181818;
    color: #fff;
    padding: 10px 20px !important;
    border-radius: 2px;
  }
  .ng-map-info-window div:first-child &gt; div:nth-child(1) {
     border-top-color: #181818 !important;
     border-right: 20px solid transparent !important;
     border-left: 20px solid transparent !important;
  }
  
  .ng-map-info-window div:first-child &gt; div:nth-child(2) {
   width: 235px !important;
   max-width: 235px !important;
  }
  
  .gm-style .gm-style-iw {
   width: 275px !important;
   max-width: 275px !important;
  }
  
  .gm-style .gm-style-iw &gt; div:first-child {
   width: 280px !important;
   max-width: 280px !important;
   position: relative;
      left: -8px;
      overflow-x: hidden !important;
  }
  .ng-map-info-window div:first-child &gt; div:nth-child(3) div {
    display: none;
  }
  .ng-map-info-window div:first-child &gt; div:nth-child(4) {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
    &lt;script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places&amp;key=AIzaSyBK9qfMYJ2vud1uiSMOJKu0A643trmBei0"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/1.3.15/angular.js"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"&gt;&lt;/script&gt;
    &lt;link href="custom-marker.css" rel="stylesheet" /&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="mapController"&gt;
    &lt;ng-map center="[40.74, -74.18]" zoom="8" id="propertyMap"&gt;
      &lt;custom-marker ng-repeat="property in allProperties" id="custom-marker-{{$index}}" position="[{{ property.latitude }},{{ property.longitude }}]" on-click="sameLocationUnits(event, property)"&gt;
        &lt;i class="map-marker"&gt;&lt;/i&gt;
      &lt;/custom-marker&gt;
      &lt;info-window id="propertyInfoWindow"&gt;
        &lt;div ng-non-bindable&gt;
          &lt;p&gt;{{unitInfo.title}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/info-window&gt;
    &lt;/ng-map&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>