George MacKerron: code blog

GIS, software development, and other snippets

Overlapping markers on your Google Map? Meet OverlappingMarkerSpiderfier

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 meant?

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

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

Try it! (You can reload this page to re-randomise the marker positions).

The code is MIT licenced, has no dependencies, and is under 3K compiled (from CoffeeScript), minified and gzipped. I wrote it as part of the data download feature for Mappiness.

It’s on Github, where you can find out more, download or fork the code.

Share

Written by George

June 22nd, 2011 at 9:19 pm

Posted in CoffeeScript,GIS,JavaScript

«
»
  • Daniel

    Fantastic! Thank you for making it. I am wondering, though, is there any way to make it work with .kml – generated placemarks?

  • http://mackerron.com George

    Hi Daniel. Unfortunately I suspect not, since of KML layers the docs say: “Importantly, however, these objects are not Google Maps API Markers, Polylines, Polygons or GroundOverlays; instead, they are rendered into a single object on the map.” (http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers)

  • Rupendra

    Amazing Work Sir … excellent

  • Rupendra

    But is there a way i can integrate it with marker clusterer

  • http://kanawogirusa.com.ar Emiliano

    Hi, awesome work, it works very well. But I have a problem, in my map I have multiple markers of different categories, and I have a menu to hide and show the markers. But the Spiderfier thinks that they are there even when they are hiden. Is there any way to solve this problem?
    Thanks!
    PS:sorry for my engrish.
    PS2: here’s a picture of my problem so you can see what I’m talking about: http://img14.imageshack.us/img14/5722/picyaq.jpg

  • http://mackerron.com George

    Rupendra: regarding clustering, I haven’t tried this myself, but I’ve been told it works: “I was able to get it working nicely actually, essentially the markerclusterer handles all clicks, etc until you pass it’s minimum threshold, and once it steps out of the way and displays the individual markers, the spiderfier then works as expected – a perfect solution!”

  • http://mackerron.com George

    Emiliano: regarding showing/hiding markers, it sounds like what you need is a removeMarker method. You can use this to stop tracking the markers that aren’t visible. I’ve just added such a method to the code! Please download the latest version from GitHub, and let me know how you get on.

  • Beau

    How can I use this with a PHP MySQL database? Thanks

  • http://mackerron.com George

    Beau: on the server you’d use PHP to query the database for the locations and associated data, and package that up in a JavaScript/JSON format to send to the client. On the client you’d write JavaScript to take that data and display it using the Google Maps API and OverlappingMarkerSpiderfier, in much the same way as shown in the documentation on GitHub. For the specifics, you probably need to look up a basic introduction to web mapping.

  • http://kanawogirusa.com.ar Emiliano

    Hi George thnaks for your answer, I tried what you suggested, but I don’t know how to specify what markers to remove. I tried this with no luck:
    for (i in marcadores) {
    if(marcadores[i].getVisible()== false){
    oms.removeMarker(marcadores[i]);
    }
    else{
    oms.addMarker(marcadores[i]);
    }
    }
    Any ideas?

  • http://mackerron.com George

    Emiliano: OK, I looked at the source of your website, and though you could use removeMarker to achieve what you want, this probably isn’t the easiest way. I’ve now updated the script to ignore markers that aren’t visible, and to be resilient to changes to the position and visibility of spiderfied markers. So you should be fine to do what you were doing before, and ignore the removeMarker method.

  • http://kanawogirusa.com.ar Emiliano

    Hi, I found a way to make it work with removeMarker:
    for (i in marcadores){
    oms.removeMarker(marcadores[i]);
    if(marcadores[i].getVisible()==true){
    oms.addMarker(marcadores[i]);
    }
    }
    First I remove all the markers and then I add only the visible ones, maybe a method to remove all the markers could become handy.

    I’ll try your new code an let you know. Thanks a lot for your help and hard work!

  • http://mackerron.com George

    Emiliano: I just edited my comment above to note that you can now do what you were doing originally and it should just work. (But note that if you ever do want to remove all the markers, I have added a method called clearMarkers(), which is much quicker than looping over them calling removeMarker()).

  • http://kanawogirusa.com.ar Emiliano

    Thanks George, you are awesome! The new script works flawlessly!

  • https://picasaweb.google.com/lh/photo/OqPUAsX2fYj7HJYsMEaCEg?feat=directlink happyman

    thank you for the awesome work! 2650 points shows without any problem!

  • http://www.locusto.com/categories.php#browse_map Riba

    Hello George – your method is hands down the best one available at the moment. I am successfully using for a project of mine, but I found a small problem (not directly related to OMS I suspect). I’d like to hear you opinion if possible.
    For some reason Opera does not show tooltips for the map Markers. In order to get around this (and the delay in displaying the tooltip) I took a look at several custom tooltip libraries for markers and found out that none of them play nicely with OMS (or I don’t know how do do it the right way). The specific one I was looking at is http://koti.mbnet.fi/ojalesa/boundsbox/tiptool_trains.htm
    Is there a way to make it work alongside with OMS, or even better – is this feature something that could be built in OMS without too much trouble? Thanks!

  • http://mackerron.com George

    Riba: I had a look at this, and the problem with your tooltip library seems likely to be down to a bug in OMS. OMS was removing all mouseover/mouseout listeners on markers when they were unspiderfied, not only its own. This is now fixed (version 0.2.2), so please download the latest JS file and try again. Longer term I may think about adding tooltips to OMS – it’s true that it would be good to be able to distinguish between the spiderfied markers without having to wait ages for the tooltips to pop up.