CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangular-google-maps
Vinicius
Vinicius

Reputation: 51

How can I change cluster icon on angular google maps?

I'm using angular google maps and I'm trying to use the cluster feature but it's not working, maybe some of u could give me a hint.

Here is a fiddle working but its with the default google cluster image (yellow, blue n red cluster), u can see 3 markers, if u reduces the zoom u will see the cluster.

http://jsfiddle.net/5ya0svjs/11/

$scope.clusterOpt = {
        calculator: function(){
            return { index: 1 , text: "HERE DUDE, CAN U SEE?", title:"Please help me guys"};
        },
        styles: [
            {
                url: "mypath/anyImage.png",
                width: 63
            }
        ],
        averageCenter: true
    };

I wanna customize it, so I've added the calculator function to return one of my own images based on how much markers is on the cluster. But when I do it the cluster is been on top of the map, not where it should be, I tried to set the avarege property and the anchor property but both is useless to solve this bug.

In this fiddle u can see the calculator function, returning always 1 for the styles array with only 1 makericoncluster (to be specific with the bug). When you reduces the zoom u will not see the cluster where it should be, but u will see it on top of the map, I didnt put an image too, I only write a text "Here dude...") (to be specific with the bug). Could someone help me?

(if u click on the marker, that is only a "here dude, can u see?" u will be placed where markers are)

This is my Fiddle

Upvotes: 2

Views: 1552

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

the width(and height)-properties of the cluster-styles do not scale the image, they clip the image. So in the example you'll only get the clipped part of the image(which is empty).

Use CSS to scale the image, e.g. via

.angular-google-map-container .cluster img {
  width:63px;
  height:93px;
}

Working fiddle: http://jsfiddle.net/5ya0svjs/30/

Upvotes: 1

Related Questions