Google API V3 multiple infowindows plus close on click

Question

I figured out how to have multiple markers with info windows but they do not close when you click another marker, I believe it is because I am creating a new info window for

Answer 1

Change your add_marker function to use a single global infowindow. One way:

var infowindow = null;
function add_marker(lat,lng,title,box_html) {

  infowindow = new google.maps.InfoWindow({
      content: box_html
  });

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
      title: title
  });

  google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(box_html);
      infowindow.open(map,marker);
  });
  return marker;
}

Also described in this example in the "Demo Gallery"

Answer 2

Create only one global InfoWindow object.

 //Global 
  var infowindow = new google.maps.InfoWindow();

and then

    function add_marker(lat,lng,title,box_html) {

        var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat,lng),
              map: map,
              title: title
        });

  google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(box_html);

        infowindow.open(map,marker);
    });
    return marker;
  }