Search code examples
google-mapsionic-frameworkmarkerclusterer

Google Maps Cluster Icon text turns blue in color


I have implemented the Markercluster with the following style in the Google Maps. Everything is fine, but the text of the marker cluster turns blue after fiddling with the map. I want the text to be white.

  styles: [{
                        height: 53,
                        url: markerIcons.clusterM1,
                        width: 53,
                        textColor: "white",
                        textDecoration: "none"
        },
                    {
                        height: 56,
                        url: markerIcons.clusterM2,
                        width: 56,
                        textColor: "white",
                        textDecoration: "none"
            },
                    {
                        height: 66,
                        url: markerIcons.clusterM3,
                        width: 66,
                        textColor: "white",
                        textDecoration: "none"
            },
                    {
                        height: 78,
                        url: markerIcons.clusterM4,
                        width: 78,
                        textColor: "white",
                        textDecoration: "none"
            },
                    {
                        height: 90,
                        url: markerIcons.clusterM5,
                        width: 90,
                        textColor: "white",
                        textDecoration: "none"
            }]
            });

"screenshot of the map"


Solution

  • This is because the text it becoming hyperlink text, which makes the text to be underlined and blue.

    Can you extend your css object to include hyperlink styling?

    {
                            height: 78,
                            url: markerIcons.clusterM4,
                            width: 78,
                            textColor: "white",
                            textDecoration: "none",
                            a.register:link { color:#FFFFFF; text-decoration:none;},
                            a.register:visited { color: #FFFFFF; text-decoration:none;},
                            a.register:hover { color: #FFFFFF; text-decoration:underline; },
                            a.register:active { color: #FFFFFF; text-decoration:none; }
                },