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

«
»
←  Older Comments
 →
  • 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.

  • 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

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

  • 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.

  • 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

  • Nice.. i will try it…

  • 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

  • marcelo

    Hi, i am using and it´s a fantastic tool, very easy to implement.
    I´d like to know, if is possible to show different marker colors, for places with only one register, and places with more than one register, indicating that specific spot can be spiderfied.

  • jorge

    Hi! Thank you for your work!

    I’m wondering if is there a posibility to set icons to draggable?

    I succeeded adding “draggable: true” to the marker but I deal with thousands of marks and the map becomes catastrophically slow at all times (showing, moving the map, zooming…).

    var marker = new gm.Marker({
    position: loc,
    title: datum.h,
    map: map,
    draggable: true
    });

  • Pardeep Beniwal

    Hi All,

    I am using markerwithLable but spiderfier is not working. Its giving me error-

    TypeError: this.e.getProjection(…) is undefined
    return this.e.getProjection().fromLatLngToDivPixel(b);

    can anyone help me out .?
    Thanks in Advance

  • Mohit Verma

    good job george.

  • Mohit Verma

    Hello George I used OverlappingMarkerSpiderfier but I can not increase zoom size? How I can overcome with this problem?

  • MWWST

    Hey Loughlin any chance you still have this code (the mash into Biostall for CI)? I’m working on exactly that now and am a little stuck.

←  Older Comments
 →