Set custom properties for <agm-marker> for filtering?

Question

I have an array of agm-markers displayed on an agm-map like this:

<agm-map [latitude]="mapCenterLatitude" [longitude]="mapCenterLongitude" [zoom]="getMapZoom()" [mapTypeId]="'hybrid'">
    <agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude" [iconUrl]="marker.iconUrl">
            <agm-info-window>
                <h2>{{marker.title}}</h2>
                <a routerLink="{{ marker.url }}">Details</a>
            </agm-info-window>
        </agm-marker>
    </agm-marker-cluster>
</agm-map>

Now I want to be able to filter them by a category. Clicking a category-checkbox should make all markers invisible, which don't belong to that category.

How can I add this category to the marker? Is there a way to add custom properties (which is possible in the pure Google Maps API)?

Answer 1

As zolastro pointed out, you can simply add properties to marker. Then I made an condition on the [visible] property of the marker to make it invisible if filters do not match.

<agm-map [latitude]="mapCenterLatitude" [longitude]="mapCenterLongitude" [zoom]="getMapZoom()" [mapTypeId]="'hybrid'">
    <agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker *ngFor="let marker of markers" 
          [latitude]="marker.latitude" 
          [longitude]="marker.longitude" 
          [iconUrl]="marker.iconUrl"
          [visible]="marker.category == 'categoryA'">
            <agm-info-window>
                <h2>{{marker.title}}</h2>
                <a routerLink="{{ marker.url }}">Details</a>
            </agm-info-window>
        </agm-marker>
    </agm-marker-cluster>
</agm-map>

Answer 2

I think you could just add a new property to your marker object. You have an array of markers, those objects have the properties latitude, longitude, iconURL...

You can add new properties to those markers:

for (let marker of markers) { marker.customProperty = 'my value' }

And afterwards filter them in your html template. You can do this using the filter function for example or creating another array that you can filter in your TypeScript file. I'll go with the first option:

<agm-map [latitude]="mapCenterLatitude" [longitude]="mapCenterLongitude" [zoom]="getMapZoom()" [mapTypeId]="'hybrid'">
    <agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker *ngFor="let marker of markers.filter(item => item.customProperty === 'desiredProperty)" [latitude]="marker.latitude" [longitude]="marker.longitude" [iconUrl]="marker.iconUrl">
            <agm-info-window>
                <h2>{{marker.title}}</h2>
                <a routerLink="{{ marker.url }}">Details</a>
            </agm-info-window>
        </agm-marker>
    </agm-marker-cluster>
</agm-map>

And that would do.

P.D. If you cannot create a custom property because you are explicitly using the agm-marker class, you can either not define the type of the markers array (set it to any) or create your custom class that extends the agm-marker class.

Hope this will help!