Angular-google-maps: Overlapping Marker Spiderfier

[Chris-Devine]

Issue description
Currently when two or more markers overlap or directly on top of one another there is no way to click/select the bottom marker.

Steps to reproduce and a minimal demo of the problem
Add two markers using the same lat,long and try show the info window for both.

as seen in below plunkr

http://plnkr.co/edit/031xGrYzAVfYR3k1OyYg?p=info

Current behavior
Cannot click the behind marker

Expected/desired behavior
Unlike the google API, in actual google maps, if this occurs, then when the user hovers over the marker the other markers will expand out in a circular pattern to allow the user to select which pin the would like to select.

This behavouir has been replicated in the package below:
https://github.com/jawj/OverlappingMarkerSpiderfier

I was wondering if this type of feature could implemented into this package or if its already on the developers roadmap?

[SebastianM]

That would definitely be a nice feature but would be in a seperate @ agm NPM Package (so not in the agm/core package). That would be a perfect fit for a little community project for agm. Or someone has time to implement it here.

[aaahti]

Would love to have that feature

[Badmonky]

We have a related issue in our project right now i think. We use clusters on agm. and if we have two markers with the exact same address (e.g. two businesses in the same building) the cluster cannot be opened. if we click on it, it just disappears into nirvana. Whats your opinion on that @SebastianM. Is this the same issue?

[Luis16287]

Same issue of @Badmonky

[Chris-Devine]

I found a work around for this, you can set "maxZoom" property so that when your fully zoomed in you do not cluster anymore.

This will fix markers that are very close, but will not fix the issue of 2 markers in the same position, the Spiderfier extension would still be need to fix this issue.

[tomasprieboj]

Is there any way how to list all markers on cluster click?

[Badmonky]

Hi there again. Did anyone look into the "same address" issue yet? Our production system has that issue right now, and its a huge problem.

[Badmonky]

@SebastianM any news on this?

[Tomdrouv1]

Hi! @SebastianM any news on this feature ?

[chancezeus]

I was giving it a try to make a module for this, but ran into the following:

The way the "MarkerManager" -> "ClusterManager" relation is set up, it seems/is impossible to have a "SpiderManager" that can be nested within the "ClusterManager" or vice-versa.

So something like:

<agm-map>
    <agm-marker-cluster>
        <agm-marker-spider>
            <agm-marker>
            <agm-marker>
            ....
        </agm-marker-spider>
    </agm-marker-cluster>
</agm-map>

This makes it impossible to create a map view where up until "maxZoom" of the clusterer you get nice "clustered" markers and after that the spiderfier kicks in to be able to "(un)spiderfy" the marker.

I know you could use @Host combined with @Optional to reference the ClusterManager but in that case a situation like the following

<agm-map>
    <agm-marker-cluster>
        <agm-marker>
        <agm-marker>
        ....
    </agm-marker-cluster>
    <agm-marker-spider>
        <agm-marker>
        <agm-marker>
        ....
    </agm-marker-spider>
</agm-map>

will also resolve the ClusterManager and thus add the markers (incorrectly) to the cluster too.

Maybe someone can correct me if I see this wrong or has a suggestion on how to do this using the current implementation, since otherwise it might mean a major (potentially breaking) change to the @agm/core and @agm/js-marker-clusterer packages.

Some changes still will be required, but these will be minor (adding a addNativeMarker/deleteNativeMarker so the nested * extends MarkerManager can forward it's addMarker/deleteMarker onto the parent without creating a completely new marker instance (which also defeats the purpose of nesting them :wink:))

[chancezeus]

I made some changes to the existing core and cluster packages and added a package for OverlappingMarkerSpiderfier support, initial testing shows it works as expected (also when used in a "nested" setup with the clusterer) so please test/review and we can also add the spiderfier as part of this libraries supported options.

[ChrisDevinePimss]

@chancezeus Thats great news, id like to test it, any examples on how to use it?

[jonomacd]

Thanks for working on this! I am also very interested in using it. If you have some brief instructions on how to set it up that would be great!

<agm-map style="width:100%; height:400px;" [latitude]="lat" [longitude]="lng" [zoom]="12">
    <agm-marker-cluster  [maxZoom]="15" [imagePath]="'https://googlemaps.github.io/js-marker-clusterer/images/m'">
         <agm-marker *ngFor='let carer of family.carers' [latitude]="carer.latitude" [longitude]="carer.longitude">                    
        </agm-marker>
    </agm-marker-cluster>
</agm-map>   

I presume I can just install spiderfier and change my agm-marker-cluster to agm-marker-spiderfier. I'm just unsure how to install it...

[cinilak]

@chancezeus I would also appreciate if you could share a guide on how to implement this, thanks :)

[Luis16287]

@jonomacd Could you please explain to me how you made it work? I presume I can just install spiderfier and change my agm-marker-cluster to agm-marker-spiderfier. I'm just unsure how to install it...
Only agm-marker-cluster works, I can not see results for agm-marker-spiderfier.
I would appreciate your help.

[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.

[MattStrybis]

Any feedback on the above? See its become pretty stale.

[hernantomassini]

@MattStrybis look this https://github.com/SebastianM/angular-google-maps/pull/1329

[MattStrybis]

@MattStrybis look this #1329

Thanks @hernantomassini perfect!!

[henryyue2010]

I met problems when trying to use agm-oms with js-marker-clusterer. Hopfully, the package of marker spiderfier can be fully supported in agm asap. Thank you very much.

[jason2211]

@henryyue2010 have you tried the npm package agm-spiderfeir? It is a fork of agm-oms that fixes an issue. It is working for me with js-marker-clusterer and ts-overlapping-marker-spiderfier.

[ghost]

Closed, as we don't support spidifier.

[ZenSide]

For people wanted to use both spiderfier and cluster plugins, my solution is to separate them with marker replication and adding a ngIf condition based on current zoom (as they don't work on same zoom level)

<agm-map (zoomChange)="currentZoom = $event" [zoom]="currentZoom">
    <agm-marker-cluster *ngIf="gpsZoom<=12">
         <agm-marker *ngFor="let marker of markers">
             ...
         </agm-marker>
    </agm-marker-cluster>
    <agm-marker-spider *ngIf="gpsZoom>12">
        <agm-marker *ngFor="let marker of markers">
            ...
        </agm-marker>
    </agm-marker-spider>
</agm-map>

(related to this stack overflow question