Updated Solution for overlapping map markers

[Bob]

When listings have the same specified location, their markers get placed on top of each other, such that you can only interact with the top marker. For example, if a bunch of listings are created where the location used is simply "Los Angeles", you get this issue. When you turn on marker clustering, it then shows you how many markers there are, but it still doesn't allow you to drill-down and interact with the individual markers. A solution is needed to allow you to interact with overlapping markers, at least in the case where marker clustering is enabled. This could either be done somehow on the map itself where you would be able to click on a cluster, and then presented with a UI that allows you to cycle through the marker details for that cluster, or another option would be that when you click on a marker cluster that represents markers with the same location, then it renders the results page for those listings, allowing you to browse the listings included in that particular marker cluster.

 

[Bob]

Going to mark this as "Updated" in CAS 2.2.29. I've updated the xa_cas_map_macros to use the OverlappingMarkerSpiderfier that deals with overlapping markers in Google Maps JS API v3, Google Earth-style

Overlapping Marker Spiderfier for Google Maps API v3

Ever noticed how, in Google Earth, marker pins that overlap each other spring apart gracefully when you click them, so you can pick the one you wanted?

Ever noticed how, when using the Google Maps API, the same thing doesn’t happen?

This library makes map markers in the Google Maps API (version 3) behave in that Google Earth way (minus the animation). Small numbers of markers (yes, up to 8) spiderfy into a circle. Larger numbers fan out into a more space-efficient spiral.

The compiled code has no dependencies beyond Google Maps. Compiled out of CoffeeScript, minified with Google’s Closure Compiler and gzipped, it’s under 4KB.

I originally wrote it as part of Mappiness. There is also a port for the Leaflet maps API, which has fewer features.

Doesn’t clustering solve this problem?

You may have seen the marker clustering library, which also helps deal with markers that are close together.

That might be what you want. However, it probably isn’t what you want (or isn’t the only thing you want) if you have markers that could be in the exact same location, or close enough to overlap even at maximum zoom. In that case, clustering won’t help your users see and/or click on the marker they’re looking for.

OverlappingMarkerSpiderfier plays nice with clustering, and you can use them together. Once you get down to a zoom level where individual markers are shown, these markers then spiderfy happily. But you may need to set the maxZoom parameter on the clusterer to ensure that it doesn’t cluster identical points all the way to the map’s maximum zoom level (14 or 15 have been suggested as sensible values).