Get list of markers in Google Maps API - reactjs

Question

I have a map in Javascript on my landing page.
I set several markers and have them info Windows to show when clicked.
When you click a marker it shows the info window. The trouble is there is no way to close the others.
I could closehere used to be a .markers property to get all markers so i could close each in a for loop.
This no longer exists.
I've tried using a shared info window. It doesn't work since there's no way to set the content in the click event of the marker.
This seems like something that should be simple.
Any ideas?
Code for reference:
function addMarker({maps,map,position,html,image,center,allowClick,location}){
// Create InfoWindow
if (infowindow) {
infowindow.close();
}
const newHtml=` <div
style={{backgroundColor:"white",width:"300px",height:"250px",borderRadius:"8px",boxShadow:"0 2px 7px 1px rgb(0 0 0 / 30%",boxSizing: "border-box",
overflow: "hidden",padding:"12px"}}
>
${location.name}
${location.phone}
${location.address}
</div>`
infowindow = new maps.InfoWindow({
content: newHtml,
zIndex: 2,
maxWidth: 500,
});
// Add Marker with infowindow
const marker = new maps.Marker({
map,
position,
icon: image,
infowindow,
});
if(allowClick){
// Add Click Event to Marker
maps.event.addListener(marker, "click", function(arg) {
//NEED TO CLOSE OTHERS HERE!!!
// Open Info Window
infowindow.open(map, marker);
// Center Map on Marker
if(center){
map.setCenter(marker.getPosition());
}
});
}
return marker;
}

Answer 1

Keep the infowindow in a variable. Whenever you open another marker, it would close the previous one.
const myLatLng = new google.maps.LatLng(10.795871902729937, 106.64540961817315),
myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions)
let infowindow
const positions = [
{lat: 10.876800062989094, lng: 106.73742011622002},
{lat: 10.781684787932484, lng: 106.62806039709115},
{ lat: 10.825433659372413,lng: 106.5160903436142 }
]
const markers = positions.map(position => {
const marker = new google.maps.Marker({
position,
map,
});
marker.setMap(map)
return marker
})
// Add click event for every marker to open new infowindow
markers.forEach((marker, index) => {
marker.addListener("click", () => {
if(infowindow) infowindow.close() // close previous infowindow
let content = `Marker ${index}`
infowindow = new google.maps.InfoWindow({
content,
})
infowindow.open(map, marker)
})
})
Code example