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??

possible duplicate of [Integrating Spiderfier JS into markerClusterer V3 to explode multi-markers with exact same long / lat](http://stackoverflow.com/questions/9726920/integrating-spiderfier-js-into-markerclusterer-v3-to-explode-multi-markers-with) — geocodezip, Dec 10 '13 at 13:36
@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. — Grish, Dec 10 '13 at 17:35
Of course there is. Just code it to do that. Or change the input data so that there are no duplicates. — geocodezip, Dec 10 '13 at 17:38
I'm with Grish. This is not a duplicate as it doesn't mention or intend to use OverlappingMarkerSpiderfier. — ow3n, Dec 17 '13 at 18:50
My solution was just to add a small amount of random noise (maybe +-50 ft in either direction) to every marker on my map, rather than trying to determine which ones lie on top of each other and only move those. Worked like a charm. — Gerald, Jan 10 '20 at 01:13

score 34 · Accepted Answer · edited Jul 29 '17 at 20:39

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);

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? — ow3n, Dec 17 '13 at 18:48

score 3 · Answer 2 · answered Sep 11 '19 at 22:49

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

answered Sep 11 '19 at 22:49

chris loughnane

2,648
4
33
54

Komal · Answer 3 · 2020-03-04T12:39:47.220

3

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});

edited Mar 04 '20 at 12:39

answered Mar 04 '20 at 11:48

Komal

1,068
12
23

This feels better than applying randomized noise to me – Malik Bagwala Jun 12 '20 at 04:41
1

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. – stefitz Oct 04 '20 at 10:11
1

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. – Manuel Fedele Dec 03 '20 at 10:19

Anoop M Maddasseri · Answer 4 · 2021-09-02T14:58:17.210

Those who are looking out for a solution in ANDROID for the same -

Or if you just want to show a list on clicking on the marker, do the below -

clusterManager.setOnClusterClickListener {
            if (googleMap?.maxZoomLevel == googleMap?.cameraPosition?.zoom) {
                val items = it.items.map { assetItem -> assetItem.title }
                MaterialAlertDialogBuilder(requireContext())
                    .setTitle("Choose an asset")
                    .setItems(items.toTypedArray()) { dialog, which ->
                        dialog.dismiss()
                        onItemClicked(it.items.elementAt(which))
                    }
                    .show()
                return@setOnClusterClickListener true
            }
            return@setOnClusterClickListener false
        }

More than one marker on same place - MarkerClusterer

4 Answers4

Linked