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.