Google Map cluster does not separate markers that are close to each other for infoWindow to display info

Question

I have a situation where I have several markers close to each other but I am unable to separate it to display the infowindow. How can I separate out the markers from the cluster (in this case is marker A and B)

Here is the example code and view of the map. you can see D and C are markers further away, so that is separated. But A and B cant be separated. How can I resolved this.

https://jsfiddle.net/t9kdqfwx/

const locations = [
  { lat: -31.56391, lng: 147.154312 },  <-- A close to B
  { lat: -31.56391, lng: 147.154323 },  <-- B close to A
  { lat: -33.66231, lng: 150.254312 },
  { lat: -33.69391, lng: 143.254312 }, 
];

Here is how I cluster the markers:

  new MarkerClusterer(map, markers_vars, {
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  });

Answer 1

You need to customize your gridSize. For the posted code, I found that 30 works and shows separated markers.

new MarkerClusterer(map, markers_vars, {
  imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  gridSize: 30
});

Relevant documentation: https://googlemaps.github.io/v3-utility-library/interfaces/_google_markerclustererplus.markerclustereroptions.html#gridsize

Here is a small tool I made that allows for testing minimumClusterSize and gridSize: http://jsfiddle.net/upsidown/2qdvjc4j/