CODEWITHSUNDEEP
angulargoogle-mapsangular2-google-mapsmarkerspiderfier
travelinglion
travelinglion

Reputation: 61

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

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.

Upvotes: 1

Views: 1876

Answers (1)

Nicolas Janel
Nicolas Janel

Reputation: 3075

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.

Upvotes: 0

Related Questions