how to set Spiderfier Marker's icon on angular google map

Question

I try to use package agm-oms(https://www.npmjs.com/package/agm-oms) to implement the marker spiderfier on google map. I followed the instructions in (https://github.com/SebastianM/angular-google-maps/pull/1329).

<agm-map (mapReady)="mapReady($event)">
    <agm-marker-cluster [maxZoom]="10" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker-spider>
            <agm-marker *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lang">
                <agm-snazzy-info-window [closeWhenOthersOpen]="true">
                    <ng-template>
                        <div class="row pop-over-content">
                            ...
                        </div>
                    </ng-template>
                </agm-snazzy-info-window>
            </agm-marker>
        </agm-marker-spider>
    </agm-marker-cluster>
</agm-map>

Right now, the markers in spiderfier are overlapped with each other. I hope to find a way to set the icon for the marker spiderfier so that: before clicking the marker spiderfier, the icon is like a marker cluster ( which has the number of markers in the icon). After clicking the spiderfier, each marker in the spiderfier displays their own icon. Any ideas on how to achieve the above feature? Thank you very much in advance for your help.

I a getting multiple error while including agm.spiderfier in my project. Is it working for you? — Techiemanu, Nov 01 '20 at 08:25

score 0 · Answer 1 · answered Nov 14 '19 at 16:28

My working solution to avoid overlapping of both plugins is to wrap them with a condition based on zoom : <agm-marker-cluster> will be used when zoom is <= 12 (for exemple) and <agm-marker-spider> will be used when zoom is > 12.

To add logic based on zoom, we used a variable (e.g. called currentZoom) which is initialized with [zoom] and updated with (zoomChange)

As those 2 plugins work by wrapping inside them, the loop to create them has to be repeated inside each one.

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

Hope it helps.

I a getting multiple error while including agm.spiderfier in my project. Is it working for you? — Techiemanu, Nov 01 '20 at 08:25

how to set Spiderfier Marker's icon on angular google map

1 Answers1