Angular-google-maps: agm-marker-cluster click events are passed to agm-map

[smcardle]

Hi.

Great library by the way.

I have a small issue that I believe should be marked as a bug with regards to click event handling in the agm-marker-cluster.

For agm-marker(s) the click events are NOT passed through to the agm-map but for the marker that represents the cluster the click events are passed on to the agm-map.

This causes me issues as I have click handlers on the map that I do NOT want executed when clicking on a marker and this should include the cluster marker.

Is there anyway I can tell the cluster maker not to pass the event on up the chain to the agm-map ???

I realise that click events on cluster markers have default behaviours, which is what I do want i.e. center map based on cluster and zoom to best fir the makers in the clicked cluster.

My main problem is that I have a click event on the map that performs other functionality and I definitely do NOT want this executed when clicking on ANY markers, including cluster markers.

Regards

Steve

[michalowskil]

Same issue here. Have you found a solution?

[vlaco]

I have the same issue too.

[JamboBuenna]

Bump, same issue

[ruisilva450]

Is there even any workaround for this?

[havo07]

@ruisilva450 you found the solution?

[ruisilva450]

@ruisilva450 you found the solution?

No.
I have a situation that I can work around this because I have to list several points that are on the same point (same lat, lng for several points).
So I just pre-group those points and use a property to show a different pin with the number of items that are in that same point. This way is just a normal marker and clicking it I can get the list of items that are grouped in that marker coordinates.

Not really a solution for the use case of this issue, sorry .

[ghost]

are you sure that it does to the map? Maybe it's just the zoomOnClick property?

[vamsibassetty08]

I've tried cluster click event as i've done in the stackblitz([https://stackblitz.com/edit/angular-tst926]), for some reason the click works but the $event parameter is undefined. Atleast in stackblitz the click event gets triggered but in my real application it didn't.

[vamsibassetty08]

@doom777, Why the clusterClick event is behaving weird in the sample created in the stackblitz link: clusterClick

[vamsibassetty08]

@doom777, do you want to raise a new issue as clusterClick event is being logged as "undefined", the same can be verified from the stackblitz: clusterClick

[ghost]

correct, clusterClick does not have an event object. https://angular-maps.com/api-docs/js-marker-clusterer/directives/agmmarkercluster#clusterClick

[vamsibassetty08]

Then how to get the details of the markers available in a specific cluster using clusterClick? is this feature yet to be implemented?

[ghost]

well, you place the markers in the cluster based on data, so you can just use the same data

<agm-marker-cluster (clusterClick)="clusterClicked(allInstes)">
  <agm-marker *ngFor="inst of allInstes" [latitude]="inst.lat" [longitude]="inst.long"></agm-marker>
</agm-marker-cluster>

[barbossa]

@doom777

well, you place the markers in the cluster based on data, so you can just use the same data

You pass allInstes to clusterClicked() function, but how to get markers in specific cluster? In you case you get all markers.

[surendravanga]

How to retrieve the values on cluster click event, which fall under the same position ?

[surendravanga]

any update on the cluster click event, when click event is fired, i should be able to get all the data present in cluster.

[HIMANSHU2307]

along with that, please suggest how to update the value of minimumClusterSize dynamically?
I'm trying resizing the cluster size on zoomChange event, but it's not working out.
Any suggestions?

[surendravanga]

@doom777,

I have debugged the libraries from node_modules from where cluster click is incorporated, below is my findings and suggestions.

1) When i click on the cluster icon in the map, this line of code (google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);) is getting fired which is present in the file (..\node_modules\js-marker-clusterer\src\markerclusterer.js).
I can see the list of markers which are associated with that particular cluster in the (this.cluster_) property

2) Then below line of code is getting fired in this file(..\node_modules\@agm\js-marker-clusterer\fesm5\agm-js-marker-clusterer.js).
var handlers = [
{
name: 'clusterclick',
handler: function () { return _this.clusterClick.emit(); },
},
];
3) I would like to suggest if you can pass the argument to the clucterClick emit, the clusterclick function which is written in our own component can easily get all the markers which is available in the particular clusters.
Below is the suggested code change from above.
var handlers = [
{
name: 'clusterclick',
handler: function (args) { return _this.clusterClick.emit(args); },
},
];

If you do the changes and publish in next version.. that would be greatful.

[surendravanga]

@SebastianM,

Any update ?

[Foreverdie]

Nobody tries the @surendravanga 's changes ?

or just a workaround ?

[Foreverdie]

So,

i applied the @surendravanga changes and it works.

for those who want to have the content of the cluster, you can do this :

In component.html

<agm-marker-cluster [imagePath]="clusterLink" (clusterClick)="clickOnCluster($event)">

In component.ts

clickOnCluster(cluster: any): void { cluster.markers_.map(m => { console.log(m); }); }

In node_modules/markerclusterer/__ivy_ngcc__/fesm2015/agm-markerclusterer.js

at line 278:
handler: (args) => this.clusterClick.emit(args),

that's a workaround because you have to redone the markerclusterer.js update everytime you delete the node_module folder.

@doom777 or @SebastianM, can you add this to the next @agm/clusterer version ? that would be great ! :)

[ghost]

sounds interesting, I'll look into it. You want to do a PR?

[surendravanga]

@Foreverdie Thanks for joining me with the work around. @doom777 . I will do a PR and send you the request.

[surendravanga]

Hi @doom777 , @SebastianM

I have created the pull request #1877 for cluster click issue.

Appreciate if you can approve soon and release in the next version.

As node_modules are getting deleted every time when we deploy, we cannot change manually, request you to release soon.

Regards,
Surendra

[surendravanga]

Any update ?

[cbodapati]

Hello there,

I cant get the marker clutterer working with the following setup
"@agm/core": "^3.0.0-beta.0",
"@agm/markerclusterer": "^3.0.0-beta.0",
"@google/markerclustererplus": "^5.1.3",

I am getting this error

ERROR in node_modules/@agm/markerclusterer/lib/directives/marker-cluster.d.ts:33:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@agm/markerclusterer) which declares AgmMarkerCluster has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

33 export declare class AgmMarkerCluster implements OnDestroy, OnChanges, OnInit, MarkerClustererOptions {

If there is a working sample hosted somewhere, can anyone pls point that to me ?

thanks

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.