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

  • jawj

    I’m sorry, I don’t quite understand your question.

  • jawj

    They can indeed be different.

  • jawj

    I’ve never used Fusion Tables, but at a glance I’m afraid it looks as if Google would have to add this feature themselves.

  • Martin

    Hi George,
    great stuff this. I downloaded it and got it working in no time: thanks for the plugin AND the documentation.

    I just have one question:
    I have added custom images for icons and when I click and the icons spiderfy, the little lines that should be in the middle are somewhat offset.

    Do you have any idea what I could do to fix this?

    thanks a lot,
    Martin

  • Martin

    Ah, I already determed what it was. The Markerpoint wasn’t accurately set to the point of the icon.

  • http://revolutionaries.ie Tom Duke

    Hi George – thanks for the code!

    I have it working with MarkerClusterer on a test page here: http://www.adultlearnersfestival.com/newsite/yourarea/map.html
    One question though, when I was using ‘google.maps.event.addListener’ to set up the infowindows I could trigger them from the dropdown menu using ‘google.maps.event.trigger’.
    I can’t figure out how to trigger the click event through the ‘oms.addListener’ however. Is that possible?
    Thanks – Tom

  • http://revolutionaries.ie Tom Duke

    Hi – figured out how to get the dropdown menu to work again without having to interact with the OMS code. – Tom

  • http://www.facebook.com/loughlinmcsweeney Loughlin McSweeney

    Hey George, truly outstanding work. I mashed it into Biostall’s excellent Codeigniter GM API v.3 library (http://biostall.com/codeigniter-google-maps-v3-api-library) and it works beautifully. You gotta work on the animation now ;) Sound effects come after that.

  • http://www.facebook.com/goonerforlife Daniel Cox

    Firstly, love the work. Such a handy script!
    But I was just wondering if its possible to customise the distance the icons are apart from each other (i.e. make the legs longer) ?

    Cheers and thanks for creating this script!

  • Loughlin McSweeney

    Hey Daniel, you can do this in the oms.js file – the minified oms.min.js file has the variables too but it’s trickier! oms.js file here – http://jawj.github.com/OverlappingMarkerSpiderfier/bin/oms.js – line 35 onwards has the config settings

  • Loughlin McSweeney

    Hey George,

    This is working out great for me – one issue I have is that when a user zooms in on the map and there are say 17 or 18 pins on top of each other with exactly the same lat and lng co-ords they may miss the fact that there are multiple markers there jsut waiting to be spiderfied on-click. Is is possible, or rather would you have any advice, on how I could have a little message appear either as a label or popup or whatever to say ‘click the pin to see all options’. FYI here’s the library working pretty well on my site http://www.yam.ie

  • http://twitter.com/rei0329 reinaldo de almeida

    Nice.. i will try it…

  • http://twitter.com/rei0329 reinaldo de almeida

    Congratulations George, very good job!
    I tried use it with markerWithLabel and markerManager, but i have 2 issues:
    1) after spiderfier te zIndex of marker dont return exactly like before…
    2) is there a way to increase the length of the “spider’s leg”?

    Thanks a Lot!

  • Deb

    Hello Friends,
    I was trying to implement MarkerCluster (MS) with
    Overlapping Marker Cluster (OMS), everything working just fine. But I
    wanted a small modification on the way OMS is working. OMS is working
    like that, when I m clicking on any Cluster(e.g. we have 2 points in it)
    its opening a marker and when I am clicking on that marker it’s opening
    spider with 2 markers.

    What I want when I am clicking on the
    Cluster, straight a way it will open up spider with 2 markers, already
    spend lot of times but still nothing worked.

    I already tried many solutions, like

    1.
    I can track the marker when I am adding to OMS, and can
    click depending on zoom_changed event of google map, but its not firing
    spiderfy rather its firing click event of what we added to markers…..

    2.
    I have see a event spiderfy, so I tried to trigger that event with a
    marker object (oms.trigger(‘spiderfy’, marker);) but nothing working…

    Can you guys help me?

  • Vani Hemmige

    Hi,

    Congrats on the great work George. I am using MarkerClusterer with OverlappingMarkerSpiderfier and I too have the same issue as the one posted above. I tried triggering spiderfy event if there are more than one markers at the same location under a cluster so that the spider opens up but it does not. It shows a shadowed marker and when I click on it it opens the spider. Please suggest some help.

    Thanks,
    Vani

  • Danie

    Hi jawj
    I love your spiderfier and in general it works like a charm. Many thanks!
    But I have a question: I only want to spiderfy markers that share the identical geographic location (X, Y), I don’t care about markers that are close to one another. Setting the nearbyDistance to 0 does not help. Is there any way to achieve this?
    Many thanks in adv.
    Danie