Overcoming multiple overlapped markers in Google Maps using GMAP3 and OverlappingMarkerSpiderfier
Recently we were working on Google Maps API project for a client who wanted to display map markers for each office locations and clicking on it will show overlay window with address and service details. Map was working fine until we face a situation where two or more offices were on the same exact location and the map markers were overlapping each other making only the top marker clickable. We are using GMAP3 jQuery plugin for all Google Maps API coding as it is very easy to use and have robust integration with API version 3. It also supports callback and global get/set methods that is quite useful when integrating it with other jQuery plugins or modules.
We then found a plugin named OverlappingMarkerSpiderfier by George MacKerron that had a very intuitive solution for overlapping markers. What it does is make multiple overlapped markers spring around the clicked marker and allows user to select the otherwise hidden map markers. The idea was taken from Google Earth that uses the same technique but in more animated way.
Here is how to integrate OverlappingMarkerSpiderfier with GMAP3 for Google Maps API.
First off, we need to define global variable for OverlappingMarkerSpiderfier plugin
var oms; so we can integrate it with GMAP3 using callback functions. Then we initialize the plugin within GMAP3 callback call like this
oms = new OverlappingMarkerSpiderfier();. Important thing to note here is that we do not attach marker events from GMAP3 but uses callback function to attach it to OverlappingMarkerSpiderfier object. Finally, we add event listener to OverlappingMarkerSpiderfier and add necessary actions to Map API.
Hope this helps someone looking for this complicated issue for overlapping map markers. If you have any queries then don’t hesitate to post comments.