Javascript 单击一个信息窗口时关闭所有其他信息窗口

我试图修改下面的代码，以便在单击一个信息窗口时关闭所有其他信息窗口，从而一次只打开一个。除了用户最多可以打开20个信息窗口之外，所有这些都非常有效。谢谢你的帮助

function infoWindow(marker, map, title, address, url) {
 google.maps.event.addListener(marker, 'click', function () {
  var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    iw = new google.maps.InfoWindow({
        content: html,
        maxWidth: 350
    });
    iw.open(map, marker);
});
}

功能信息窗口（标记、地图、标题、地址、url）{
google.maps.event.addListener（标记，'click'，函数（）{
var html=“”+title+”
”；
iw=新建google.maps.InfoWindow({
内容：html，
最大宽度：350
});
iw.打开（地图、标记）；
});
}

如果您只需要一个信息窗口，请只创建一个，并在单击事件的标记之间移动它

更新代码：

// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}

---

给你。对于任何使用react的人。如果将标记作为单独的组件，则可以使用此组件

class MarkerWithInfoWindow extends React.Component {

  constructor() {
      super();
      this.state = {
          isOpen: false,
          out: false,
          in: false
      }

  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  onToggleOpen = () => {
      this.setState({
          isOpen: !this.state.isOpen
      });

  }



setWrapperRef = (node) => {
  this.wrapperRef = node;
}

handleClickOutside = (event) => {
  if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {

    this.onToggleOpen();
  }
}

  render() {
      return (<Marker
          position={this.props.position}
          onClick={this.onToggleOpen}>
          {this.state.isOpen && <InfoWindow   style={{ borderRadius: '25px'}} >
            <div 
            ref={this.setWrapperRef}



            style={{ borderRadius: '25px', backgroundColor: `white`,  marginTop: 0, width: '250px', height: '350px' }}>
              <Grid container >
                <Grid item  style={{height: '60%', }}>
                  <img src={GameImage} style={{ borderTopLeftRadius: '25px', borderTopRightRadius: '25px', position: 'absolute', top: 0, left:0, width: '100%'}}/>
                </Grid>
                </Grid>

                <Grid container >

                <Grid item xs={6} style={{position: 'absolute', top: '50%'}}>
              <Typography variant="h6" gutterBottom>
        Name of Game
      </Typography>
               </Grid>

              </Grid>

            </div>

          </InfoWindow>}
      </Marker>)
  }
}`

类标记WithInfo窗口扩展React.Component{
构造函数（）{
超级（）；
此.state={
伊索彭：错，
出：错，
in:错
}
}
componentDidMount（）{
document.addEventListener（'mousedown'，this.handleclickout）；
}
onToggleOpen=（）=>{
这是我的国家({
isOpen:！this.state.isOpen
});
}
setWrapperRef=（节点）=>{
this.wrapperRef=节点；
}
handleClickOutside=（事件）=>{
if（this.wrapperRef&&！this.wrapperRef.contains（event.target））{
这个是；
}
}
render（）{
返回(
{this.state.isOpen&&
游戏名称
}
)
}
}`

可能存在的重复项。如果只需要一个信息窗口，请仅创建一个，并在单击事件的标记之间移动它。可能的重复项