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

Answer 1

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>