Search code examples
angulartypescriptgoogle-mapsmarkerclustererazure-maps

GoogleMaps JS API v3 cluster multiple data types seperately


I want to use MarkerClusterer with multiple markers of different type and cluster them separately. For example, cluster markers of type X only with other markers of type X, and markers of type y, with other markers of type y.

There are different types of markers in my map (not all the markers represent the same type of element)

I need it to cluster all the markers in the map if the zoom is lower or equal than 15 (easy part).

What I can't achieve is clustering the markers by the type of the marker when zoom is higher than 15.

Thanks for your help.


Solution

  • If this is possible with Google Maps, you likely will need to separate your markers ahead of time and pass each group of markers into a separate MarkerCluster.

    You may also want to take a look at Azure Maps. It has a lot more functionality when it comes to clustering (also a lot cheaper than Google Maps). In Azure Maps you would group your markers of the same type into different data sources and enable clustering on the data sources. Here are some resources:

    https://learn.microsoft.com/en-us/azure/azure-maps/clustering-point-data-web-sdk

    https://azuremapscodesamples.azurewebsites.net/index.html?search=cluster