Markers which have identical coordinates don't collapse

Question

Clusters are created on my maps, but when markers have the same addresses, when clicking on a cluster, the tooltip is not shown. I am using Gmaps Marker Clusterer. Code example: ` function initMap(){ // map options var options = { zoom:7, center:{lat:53.3938131, lng:-7.858913} } var map = new google.maps.Map(document.getElementById('map'),options); // Add a marker clusterer to manage the markers.

          //Add marker
          var markers = [

            //Dublin
            {
              coords:{lat:53.338741, lng:-6.261563},
              iconImage:'assets/img/places/stparkdublin.png',
              content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
            },
            {
              //coords:{lat:53.3755012,lng:-6.2735677},
                        coords:{lat:53.338741, lng:-6.261563},
              iconImage:'assets/img/places/botanic garden.png',
              content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
            }
          ];

          // Loop through markers
          var gmarkers = [];
          for(var i = 0; i < markers.length; i++){
            gmarkers.push(addMarker(markers[i]));

          }

          //Add MArker function
          function addMarker(props){
            var marker = new google.maps.Marker({
              position:props.coords,
              map:map,

            });

            /* if(props.iconImage){
              marker.setIcon(props.iconImage);
            } */

            //Check content
            if(props.content){
              var infoWindow = new google.maps.InfoWindow({
                content:props.content
              });
              marker.addListener('click',function(){
                infoWindow.open(map,marker);
              });
            }
            return marker;
          }
        var markerCluster = new MarkerClusterer(map, gmarkers, 
          {
            imagePath:
            'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
          });
        }
      google.maps.event.addDomListener(window, 'load', initMap)
    </script>

` Marker classter

Answer 1

In your example you create clusterer and don't specify the maximum zoom level for clustering. That means two markers with same coordinates will never be shown as separate markers with info windows. So you should add maxZoom parameter in clusterer options.

On the other hand in order to separate two markers with the same coordinate you should use Overlapping Marker Spiderfier. When you click on overlaping markers you will see all of them.

I modified your example from jsfiddle and added max zoom 19 for clustering, so at zoom 20 or 21 you will see markers and on click you will see separated markers

Have a look at the following code snippet

function initMap() {
  // map options
  var options = {
    zoom:7,
    center:{lat:53.3938131, lng:-7.858913}
  }
  var map = new google.maps.Map(document.getElementById('map'), options);

  var oms = new OverlappingMarkerSpiderfier(map, {
    markersWontMove: true,
    markersWontHide: true,
    basicFormatEvents: true,
    ignoreMapClick: true,
    keepSpiderfied: true
  });

  // Add a marker clusterer to manage the markers.
  //Add marker
  var markers = [
    //Dublin
    {
      coords:{lat:53.338741, lng:-6.261563},
      iconImage:'assets/img/places/stparkdublin.png',
      content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
    },
    {
      //coords:{lat:53.3755012,lng:-6.2735677},
      coords:{lat:53.338741, lng:-6.261563},
      iconImage:'assets/img/places/botanic garden.png',
      content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
    }
  ];

  // Loop through markers
  var gmarkers = [];
  for(var i = 0; i < markers.length; i++){
    gmarkers.push(addMarker(markers[i]));
  }

  //Add MArker function
  function addMarker(props){
    var marker = new google.maps.Marker({
      position:props.coords,
      map:map
    });

    //Check content
    if(props.content){
      var infoWindow = new google.maps.InfoWindow({
        content:props.content
      });
      marker.addListener('click',function(){
        infoWindow.open(map,marker);
      });
    }
        
    oms.trackMarker(marker);
        
    return marker;
  }
  
  var markerCluster = new MarkerClusterer(map, gmarkers, 
    {
      maxZoom: 19,
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
}
  
google.maps.event.addDomListener(window, 'load', initMap)

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>

Answer 2

Solved:

           var options = {
             minClusterSize: 2,
             zoomOnClick: true,
             maxZoom: 20 
           };
           markerCluster = new MarkerClusterer(map, allMarkers, options);
           google.maps.event.addListener(markerCluster, 'clusterclick', 
              function(cluster) {
                var content = '';
                content += '<div class="custom-marker-box">';
                // Convert the coordinates to an MVCObject
                var info = new google.maps.MVCObject;
                info.set('position', cluster.center_);
                //Get markers
                var marks_in_cluster = cluster.getMarkers();

                console.log(marks_in_cluster);

                for (var z = 0; z < marks_in_cluster.length; z++) {
                    content += marks_in_cluster[z].args["title"]; 
                    console.log(content);
                }

                var infowindow = new google.maps.InfoWindow({
                  content: content
                });
                content += '</div>';
                infowindow.close(); // closes previous open ifowindows
                infowindow.setContent(content); 
                infowindow.open(map, info);
              });