How to update or force redraw marker cluster icon on Google Maps api?

Question

I created a custom cluster html marker and inside this marker I change the color of my markers from my cluster. Debug the code the variable color updated, but my marker color not.

I create a function updateMakers that I call to update my clusters.

I call this function to update the cluster markers

 document.getElementById('update').addEventListener('click', function(){

 updateMarkers(locations, markers, HTMLMarker, map, 'green');
})

But the color does not update.

 function initMap() { var map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 37.773972, lng: -122.431297 }, gestureHandling: "greedy", disableDefaultUI: true }); var markers = []; var locations = [{ lat: 37.77, lng: -122.44, }, { lat: 37.78, lng: -122.45, }, { lat: 37.79, lng: -122.42, }, { lat: 37.72, lng: -122.43, }, { lat: 37.74, lng: -122.42, }, { lat: 37.75, lng: -122.41, }, { lat: 37.75, lng: -122.43, }, { lat: 37.79, lng: -122.43, }, { lat: 37.78, lng: -122.43, } ]; var Newlocations = [ {lat: -31.563910, lng: 147.154312}, {lat: -33.718234, lng: 150.363181}, {lat: -33.727111, lng: 150.371124}, {lat: -33.848588, lng: 151.209834}, {lat: -33.851702, lng: 151.216968}, {lat: -34.671264, lng: 150.863657}, {lat: -35.304724, lng: 148.662905}, {lat: -36.817685, lng: 175.699196}, {lat: -36.828611, lng: 175.790222}, {lat: -37.750000, lng: 145.116667}, {lat: -37.759859, lng: 145.128708}, {lat: -37.765015, lng: 145.133858}, {lat: -37.770104, lng: 145.143299}, {lat: -37.773700, lng: 145.145187}, {lat: -37.774785, lng: 145.137978}, {lat: -37.819616, lng: 144.968119}, {lat: -38.330766, lng: 144.695692}, {lat: -39.927193, lng: 175.053218}, {lat: -41.330162, lng: 174.865694}, {lat: -42.734358, lng: 147.439506}, {lat: -42.734358, lng: 147.501315}, {lat: -42.735258, lng: 147.438000}, {lat: -43.999792, lng: 170.463352} ] updateMarkers(locations, markers, HTMLMarker, map, 'red'); document.getElementById('update').addEventListener('click', function(){ updateMarkers(locations, markers, HTMLMarker, map, 'green'); }) function updateMarkers(data, markers, HTMLMarker, map, bg) { var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var infoWin = new google.maps.InfoWindow(); markers = data.map(function(location, i) { var htmlMarker = new HTMLMarker(location.lat, location.lng, bg); google.maps.event.addListener(htmlMarker, 'click', function(evt) { console.log("htmlMarker click@" + evt.latLng.toUrlValue(6)); infoWin.setContent("Open my info window<br>marker #" + i); infoWin.setOptions({ pixelOffset: new google.maps.Size(20, 0) }) infoWin.open(map, htmlMarker); }); return htmlMarker; }); var markerCluster = new MarkerClusterer(map, markers, { imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m" }); } } google.maps.event.addDomListener(window, 'load', initMap); var HTMLMarker = function (lat, lng, bg) { this.lat = lat; this.lng = lng; this.pos = new google.maps.LatLng(lat, lng); this.bg = bg; } HTMLMarker.prototype = new google.maps.OverlayView(); HTMLMarker.prototype.onRemove = function() { if (this.div && this.div.parentNode && this.div.parentNode.removeChild) this.div.parentNode.removeChild(this.div); } HTMLMarker.prototype.getDraggable = function() {}; HTMLMarker.prototype.getPosition = function() { return this.pos }; HTMLMarker.prototype.onAdd = function() { this.div = document.createElement('DIV'); this.div.className = "htmlMarker"; this.div.style.position = 'absolute'; this.div.style.cursor = 'pointer'; console.log(this.bg); this.div.innerHTML = `<p style="background:${this.bg}">$500</p>`; var that = this; this.div.addEventListener("click", function(evt) { console.log("click"); google.maps.event.trigger(that, 'click', { latLng: that.pos }) }) var panes = this.getPanes(); panes.overlayImage.appendChild(this.div); } HTMLMarker.prototype.draw = function() { var overlayProjection = this.getProjection(); var position = overlayProjection.fromLatLngToDivPixel(this.pos); var panes = this.getPanes(); this.div.style.left = position.x + 'px'; this.div.style.top = position.y + 'px'; }

 body { margin: 0; padding: 0; font: 12px sans-serif; } h1, p { margin: 0; padding: 0; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> <div id="map"></div> <button style="position: absolute; bottom: 40px" id="update">UPDATE MARKERS</button>https://stackoverflow.com/questions/ask#

Answer 1

My mistake I need to set a timeOut to resolve my problem.

setTimeout(() => {
           updateMarkers(locations, markers, HTMLMarker, map, 'green');
      }, 300);