Close all other InfoWindows when one is clicked

Question

I am trying to amend the below code so that all other infoWindows are closed when one is clicked, so only one is open at once. All currently works great, besides the fact that the user can open up to 20 infoWindows. Thanks for your help.

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

Possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example). If you only want one InfoWindow, only create one and move it between markers on the click event. — geocodezip, Jul 25 '16 at 14:21
[Proof of concept fiddle](http://jsfiddle.net/geocodezip/7de0z99e/1/) — geocodezip, Jul 25 '16 at 14:27
possible duplicate of [close InfoWindow before open another](http://stackoverflow.com/questions/14321808/close-infowindow-before-open-another) — geocodezip, Jul 25 '16 at 14:36

geocodezip · Accepted Answer · 2023-01-18T12:20:53.027

If you only want one InfoWindow, only create one and move it between markers on the click event.

updated code:

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

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map
  });
  infoWindow(marker1, map, "title1", "address1", "http://www.google.com")
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(37.44, -122.14),
    map: map
  });
  infoWindow(marker2, map, "title2", "address2", "http://www.yahoo.com")


}
google.maps.event.addDomListener(window, "load", initialize);
// 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 + "' target='_blank'>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);
  });
}

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

score 0 · Answer 2 · answered Feb 04 '20 at 19:33

Here you go. For anyone using react. If you make the Marker a separate component you can use this.

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>)
  }
}`

Close all other InfoWindows when one is clicked

2 Answers2

Linked