Integrating Spiderfier JS into markerClusterer V3 to explode multi-markers with exact same long / lat

Question

I am using markerCLusterer V3 on a db file from Filemaker to generate a (semi-live) map of current delivery locations, based off of addresses. Grabbing the lat/long from Go

Answer 1

Integrating Spiderfier JS into markerClusterer

• Download the oms.min.js file from here
• Download the markerClusterer.js and the image folder from here

In order to make both work together you only need to add a maxZoom to the clusterMarker object

 new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15}); 

(Zoomlevel 0 is the complete earth, and 20 is pretty close to the ground). This means that if you zoom into the map further as zoom level 15 (for example if you click on a cluster) then the clusters are not shown anymore. If you now click on markers that are on the exact same location (or close to each other) Spiderfier JS will trigger.

It follows now a minimal working example. I made some comments in the code so I think its self-explanatory, but here are some things to mention:

• Replace YOUR_API_KEY with your api key
• Make sure to load oms.min.js after you loaded the google maps api

Example:

---

Recommendation

If you are starting from scratch, I would recommend to use the JS Libary Leaflet. Because this library provides you with the LeafletMarkerCluster plugin which is basically markercluster with Spiderfier integrated, and a lot of other cool stuff.

Advantage:

• Cluster look really nice
• Leaflet really easy to use and looks pretty
• You do not need to customize the code, because Spiderfier and markerCluster already integrated
• Some fancy other stuff: Like showing the border on hover of a region where marker are spread.
• You can freely choose your map-tiles-provider and are no longer restricted to google maps (possible providers here)

Downsites:

• You may need to invest 30min to learn and use the Leaflet API instead of the Google API
• If you want to use Google Map Tiles, then you need to use this plugin, because you are only allowed to use the Google Tiles when using the Google API. This plugin is a wrapper for the Google API.

Here is an example code: