Store Locator for WordPress has integrated two cluster libraries in the plugin, first one is Marker Cluster Plus while the second one is the newer version of Google Cluster Library, any one of them can be used in order to show your markers in clusters.
For the last few months and for some users, Marker Clusterer is having some problems with mobile devices on click of the cluster so it is recommended to use the newer version.
Change the Colors using Marker Clusterer (New) #
In order to change the cluster colors, you have to provide the color code in hex format in the shortcode. The shortcode attributes are cluster_m1 and cluster_m2, which you need to add to the shortcode, as shown below.
[ASL_STORELOCATOR cluster_m1="#FF0000" cluster_m2="#FFFF00"]Change Cluster Colors using Marker Clusterer Plus #
The plugin is using CSS-based clusters from its version 4.6.12. Therefore, if you have an older version, you have to upgrade to the latest version of the plugin to make it work. Here are the CSS rules that can be applied to change the cluster colors. In addition, the color values must be in hex format.
body .asl-cont .asl-cluster-1, body .asl-p-cont .asl-cluster-1 {--cluster-color: #00a2d3;} body .asl-cont .asl-cluster-2, body .asl-p-cont .asl-cluster-2 {--cluster-color: #ff9b00;} body .asl-cont .asl-cluster-3, body .asl-p-cont .asl-cluster-3 {--cluster-color: #ff6969;}In the above CSS lines, the hex codes can be changed. After that, the CSS can be placed into the Theme style.css or Additional CSS under the Appearance in the wp-admin panel.
To see the option such as grid size and max size of the cluster, follow the guide article.