Overlapping Marker Spiderfier Marker Icon When There are Multiple Markers at Same Location

Question

Google Maps doesn\'t provide a way to break apart multiple markers that are at the same location. This can occur with a people or businesses at a multiple residency location suc

Answer 1

I managed to match the following Versions:

• MarkerClusterer 2.0.13
• OverlappingMarkerSpiderfier 3.27

On every creation of a new Marker, i store the initialIconUrl in the Marker Object

 var marker = new google.maps.Marker({
    position: //some position
});

marker.setIcon(iconUrl);
marker.initialIconUrl = iconUrl;

When declaring the OverlappingMarkerSpiderfier, set the nearbyDistance to 0.001 (or some other very small value).

this.oms = new OverlappingMarkerSpiderfier(this.map, {
    markersWontMove: true,
    markersWontHide: true,
    nearbyDistance: 0.001 //This will only spiderfy the Markers if they have the exact same position
});

Then, we need a listener on the maps 'idle' Event, to format the Markers manually. I needed this because my SPIDERFIABLE Marker wouldn't show correctly on the first step, when transferring from the Clustered Marker to the seperate Markers.

var me = this;
google.maps.event.addListener(this.map, 'idle', function () {
    me.oms.formatMarkers();
});

Listen to the oms 'format' Event and set the iconURL for Markers that are SPIDERFIABLE. If the Marker is not spiderfiable, reset the Icon to the initial Url.

var spiderfiableIconUrl = //Whatever you need

this.oms.addListener('format', function (marker, status) {
    var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE
        ? spiderfiableIconUrl :
        marker.initialIconUrl;

    marker.setIcon(iconURL);
});

Hope this helps.

Answer 2

Here's how I got it to work. Where map is a Gmap instance and oms is an Overlapping Marker Spiderfier instance. We're also using Marker Clusterer on the initial zoom which buys us a break.

map.addListener('zoom_changed', function() {        

    map.addListenerOnce('idle', function() {

        // change spiderable markers to plus sign markers
        // we are lucky here in that initial map is completely clustered
        // for there is no init listener in oms :(
        // so we swap on the first zoom/idle
        // and subsequently any other zoom/idle

        var spidered = oms.markersNearAnyOtherMarker();

        for (var i = 0; i < spidered.length; i ++) {

            // this was set when we created the markers
            url = spidered[i].icon.url;

            // code to manipulate your spidered icon url
        };

    });

});


oms.addListener('unspiderfy', function(markers) {

    var spidered = markers;

    for (var i = 0; i < spidered.length; i ++) {

        url = spidered[i].icon.url;

        // change it back
    };
});


oms.addListener('click', function(marker) {

  // put the clicked-on marker on top
  // when oms un-spiders

  marker.zIndex=999;

  // set infowindow, panning etc.

});

Answer 3

Some methods seems to be interesting like markersNearAnyOtherMarker but I cannot get it work. An interesting way could be to use spiderfy and unspiderfy events and change marker when it's fired

overlappingMarkers = new OverlappingMarkerSpiderfier(map, overlapOptions);
overlappingMarkers.addListener('spiderfy', function (markers) {
    markers.forEach(function (marker) {
        marker.setLabel('*');
        marker.setIcon(myNormalIcon);
    })
})
overlappingMarkers.addListener('unspiderfy', function (markers) {
    markers.forEach(function (marker) {
        marker.setLabel(''+markers.length);
        marker.setIcon(myOverlapIcon);
    })
})

Unfortunatly, the unspiderfy event isn't fired until we open then close the overlap marker. If I find a conclusion to this solution I will update this post.