Initial agmcluster commit with broken maxZoom

src/app/dashboard/dashboard.module.ts

@@ -5,6 +5,7 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
+import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
 
 import { CurrencyPipe } from '@angular/common';
 
@@ -42,6 +43,7 @@ import { environment } from '../../environments/environment';
     AgmCoreModule.forRoot({
       apiKey: environment.mapApiKey
     }),
+    AgmJsMarkerClustererModule,
     BsDropdownModule,
     NgxPaginationModule,
     DashboardRoutingModule,

src/app/dashboard/map.component.html

@@ -22,16 +22,18 @@
               [zoom]="zoom"
               [scaleControl]="true"
               (idle)="viewBoundsChanged($event)">
-              <agm-marker
-                  *ngFor="let m of markers"
-                  [latitude]="m.latitude"
-                  [longitude]="m.longitude"
-                  [label]="m.name[0]">
+              <agm-marker-cluster [maxZoom]=12 [imagePath]="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
+                <agm-marker
+                    *ngFor="let m of markers"
+                    [latitude]="m.latitude"
+                    [longitude]="m.longitude"
+                    [label]="m.name[0]">
 
-                <agm-info-window>
-                  <strong>{{m.name}}</strong>
-                </agm-info-window>
-              </agm-marker>
+                  <agm-info-window>
+                    <strong>{{m.name}}</strong>
+                  </agm-info-window>
+                </agm-marker>
+              </agm-marker-cluster>
             </agm-map>
           </div>
         </div>