php - How can I update the marker cluster from the map based on the list of locations?

Question

In this page, I have a table at the top which consists of community names and below this table I have a google map that shows the marker position of those community names placed that are shown in cluster once it is zoom in. Now what I am trying to do is when I click the delete button (i.e. via PHP function delete_btn()) in the table row, I need to remove the specific marker that corresponds to the table row with the delete button position in the map and update the cluster number as well. How can I achieve this?

I have posted my code structure below:

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ]
];
var markers = [];
var map; //set scope here so various functions can use them

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
  }
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

}
google.maps.event.addDomListener(window, "load", initialize);
//set up delegate
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandlerDelegate);
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<table id="sum_table">
  <tr class="titlerow">
    <th>S.N.</th>
    <th>Community</th>
    <th width="18%">Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Haringhata</td>
    <td><button class="deleteMarker" data-id="0">Remove</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td><button class="deleteMarker" data-id="1">Remove</button></td>
  </tr>
</table>
<div id="map"></div>

Answer 1

In the API documentation for the Marker Clusterer add-on, the methods list contains

boolean removeMarker(marker:google.maps.Marker)
Removes a marker from the cluster.

In order to use that method within the click handler (i.e. clickHandlerDelegate()), the declaration (i.e. with keyword var) will need to be moved out of the initialize function:

var map; //set scope here so various functions can use them
var markerCluster;

Then when instantiating that variable, remove the var keyword:

}
markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

Finally, in the clickHandler function, pass the marker (i.e. markers[index]) to a call to that removeMarker() method:

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
    markerCluster.removeMarker(markers[index]);
  }
}

See this demonstrated in the example below. A third marker was added to demonstrate that the cluster number goes down to 2 with the deletion of the first location.

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ],
  ["New Digha Sea Beach",
    21.617401, 87.500898
  ]
];
var markers = [];
var map; //set scope here so various functions can use them
var markerCluster;

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
    markerCluster.removeMarker(markers[index]);
  }
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }
  markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

}
google.maps.event.addDomListener(window, "load", initialize);
//set up delegate
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandlerDelegate);
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<table id="sum_table">
  <tr class="titlerow">
    <th>S.N.</th>
    <th>Community</th>
    <th width="18%">Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Haringhata</td>
    <td><button class="deleteMarker" data-id="0">Remove</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td><button class="deleteMarker" data-id="1">Remove</button></td>
  </tr>
  
  <tr>
    <td>3</td>
    <td>New Digha Sea Beach</td>
    <td><button class="deleteMarker" data-id="2">Remove</button></td>
  </tr>
</table>
<div id="map"></div>