Search code examples
angulargoogle-mapsmarkerclusterer

What is the imagepath format in agm-marker-cluster, and how can I assign different marker cluster icons for different types?

I have angular google map which displays different data types on the map. I want to have a custom image for agm-marker-cluster when we zoom out to represent data types.

I tried to change the imagePath to an image which is in the project directory but it was not successful, I can see the number of data types On the map but not any image.

My first question is what is the imagePath format? I feel like the problem for my case is with imagePath. Based on my research we need to add "/m " at the end of the path and I did so, am I right? code is like this:

<agm-marker-cluster imagePath="/Content/Icons/example.png/m" >

second question is how can I add different icons/Images for agm-marker-cluster for different datatypes, I mean how can I handle multiple images in the code?

Thanks in advance.

Solution

  • So I found the answer, based on https://github.com/googlemaps/js-marker-clusterer what I should do is name the images like name1.png name2.png ... name5.png and then when I want to use them in marker cluster I need to set imagePath like imagePath= "imageFolderPath/name" Sooo no need to include 1,2, ... and .png in the imagePath. and It worked and solved both issues.

    my code looks like this:

    <agm-marker-cluster imagePath="/Content/Icons/name" >

    and in the /Content/Icons folder I have name1.png name2.png name3.png