Change the Marker Cluster Images

The images below are the default images used in the marker clusters. The blue image on the left is used when there are only a few locations, the purple image on the right is used when there are thousands of locations, and everything in between is used when there are a few dozen, or hundreds of locations to merge together.

You can see an example of this here.

If you want to modify them, then you can download a zip file with the cluster images here. It’s important that the dimensions and the file names remain the same.

Set a Custom Image Path

If it doesn’t already exist, then first create a wpsl-markers folder in your active theme folder. Move your custom images there, and place the code below in the functions.php.

add_filter( 'wpsl_js_settings', 'custom_js_settings' ); function custom_js_settings( $settings ) { $settings['clusterImagePath'] = get_stylesheet_directory_uri() . '/wpsl-markers/m'; return $settings; }

This changes the default image path from https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m to the wpsl-markers folder holding your custom images on your own server.

After you made the changes the custom cluster marker images should show up on the map.