More than one marker on same place - MarkerClusterer

Question

I am using MarkerClusterer. When I have two or more markers on the exact same spot, The API only displays 1 marker - the top one. But somehow I want to show all the markers as each one will be opening distinct popup. I have searched found few solutions but none are seem to be working Anybody had similar issue and would pls share a solution??

Solution 1

Finally got it working. This is for all those who still haven't found a solution. Below code adds offset to the markers on same location:

In your createMarker function add this code:

//get array of markers currently in cluster
var allMarkers = namespace.mapParams.mapMarkersArray;

//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;

//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
    for (i=0; i < allMarkers.length; i++) {
        var existingMarker = allMarkers[i];
        var pos = existingMarker.getPosition();

        //if a marker already exists in the same position as this marker
        if (latlng.equals(pos)) {
            //update the position of the coincident marker by applying a small multipler to its coordinates
            var newLat = latlng.lat() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
            var newLng = latlng.lng() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
            finalLatLng = new google.maps.LatLng(newLat,newLng);
        }
    }
}

Refer this

Now update your google.maps.Marker object for each marker with new position value – finalLatLng.

var marker = new google.maps.Marker({
    map: msf_namespace.mapParams.resultmap,
    position: finalLatLng,
    title: name,
    icon: markericon
});

//add each generated marker to mapMarkersArray
namespace.mapParams.mapMarkersArray.push(marker);

Solution 2

MarkerClusterer has option to define maxZoom upto which cluster should be visible in map. You can set its value to 18, so it wont show cluster when user zoomed in to its maximum:

 const markerCluster = new MarkerClusterer(map, markers,{maxZoom: 18});

Solution 3

FYI - Precision

decimal places  decimal degrees N/S or E/W at equator
2   0.01    1.1132 km
3   0.001   111.32 m
4   0.0001  11.132 m
5   0.00001 1.1132 m

Comments

[geocodezip]

possible duplicate of Integrating Spiderfier JS into markerClusterer V3 to explode multi-markers with exact same long / lat

[Grish]

@geocodezip is there a way to make it work without using OverlappingMarkerSpiderfier as it doesn't satisfy the need. Showing both the markers with little space just to know that there are two or more markers will do. Thanks.

[ow3n]

I'm with Grish. This is not a duplicate as it doesn't mention or intend to use OverlappingMarkerSpiderfier.

[ow3n]

I much prefer your method over the spidering trick but I wonder how many markers you are working with and if you noticed any slowing-down of the placement?

[Malik Bagwala]

This feels better than applying randomized noise to me

[stefitz]

This also felt better to me than the randomize solution, but it only solves the problem, that from a certain zoom level the markers are shown instead of the cluster. But if you want the markers to be shown as individual (and clickable) markers in order to show an info window, the randomize solution is the way to go.

[Manuel Fedele]

So, after using this I see ONE marker instead of the cluster. I can click only the first, the others are hidden. Not a solution.