Search code examples
google-mapsgoogle-maps-api-3markerclusterer

More than one marker on same place - MarkerClusterer


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

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