Cluster click event in Agm Map

Question

Trying to plot the markers using latitude and longitude in agm-map. Using agm-marker-cluster to cluster the markers. If there are 10 markers with same lat and long how will i get the cluster click along with the details of those 10 markers clustered together?

<agm-marker-cluster *ngFor="let item of ClusterArray; let i = index" [styles]="item[1]">
  <agm-marker *ngFor="let items of item[0]" [latitude]="items.latitude" [longitude]="items.longitude"[iconUrl]="item[2]" (markerClick)="markerClick(items)">
  </agm-marker>
</agm-marker-cluster>

Answer 1

see this worked for me:

marker-cluster.directive.ts

import { Directive, OnInit, Input, EventEmitter } from '@angular/core';
import { GoogleMapsAPIWrapper } from '@agm/core';
import { GoogleMap, Marker } from '@agm/core/services/google-maps-types';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { AppService } from '../service/app.service';
import 'js-marker-clusterer/src/markerclusterer.js';

declare const google;
declare const MarkerClusterer;

@Directive({
  selector: 'marker-cluster',
  outputs: ['markerClick'],
})


export class MarkerCluster implements OnInit {

  markerClick: EventEmitter<string> = new EventEmitter<string>();

  public environment = environment;
  //set google maps defaults
    //zoom level
    zoom: number = 12;
    //start position
    lat:number  = 45.508755;
    lng:number = -73.587579;

    urlMarkers = environment.urlServiceWeb + 'liste/pub/all/all/true/false';

    markers: marker[] = [];
    map: any;
    selectedMarker: any;

  constructor(
    private gmapsApi: GoogleMapsAPIWrapper,
    private httpService: AppService,

    ) { }

ngOnInit() {
    this.gmapsApi.getNativeMap().then(map => {
      this.map = map;
      this.httpService.getData(this.urlMarkers)
      .subscribe(
         data => {

            const corveeMarkers = [];

            for (let key in data.markers) {
              let statusCorvee = data.markers[key].estPublic;
              let iconUrl;
              if(statusCorvee==true){
                 iconUrl = {
                  url: 'assets/icons/icon-public.png'
                }
              }else{
                iconUrl = {
                  url: 'assets/icons/icon-prive.png'
                }
              }

              var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data.markers[key].latitude, data.markers[key].longitude),
                icon: iconUrl
              });
              google.maps.event.addListener(marker, 'click', () => {

                  this.markerClick.emit(data.markers[key]);
                  this.selectedMarker = data.markers[key];

              });
               corveeMarkers.push(marker);
            }
            var markerCluster = new MarkerClusterer(this.map, corveeMarkers, {imagePath: "https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m"});
        },
        error => {
            //console.log(error);
        }
       );
    });
  } // end ngOnInit
}

interface marker {
  lat: number;
  lng: number;
  status: string;
}