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

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

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

Answer 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

Answer 4

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

• Issue - https://github.com/googlemaps/android-maps-utils/issues/384
• Solution - https://github.com/menismu/android-maps-utils/blob/master/demo/src/com/google/maps/android/utils/demo/ClusteringSameLocationActivity.java

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
        }