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;
  }

CodePudding user response：

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