javascript - Google Maps API - only one infowindow open at once

Question

Here is the map I am working on. I'm trying to have only one infowindow open at a time, and the open infowindow will close when the map or another marker is clicked.

I know this has been asked and answered several times already, but I've attempted to go through those examples and can't figure out how to apply them to my specific code, which pulls photos from Flickr and puts them in infowindows tied to markers. I'm pretty sure the solution involves creating a single infowindow and changing its content.

updated fiddle displaying issue

code snippet (from fiddle):

var lat = 0;
var long = 0;

$(document).ready(function() {

  $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&has_geo=1&extras=geo&format=json&jsoncallback=?", displayImages3);

  function displayImages3(data) {


    $.each(data.photos.photo, function(i, item) {

      lat = item.latitude;
      lng = item.longitude;

      var photoURL = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
      var linkURL = 'https://www.flickr.com/photos/' + item.owner + '/' + item.id + '';
      htmlString = '<a href="' + linkURL + '" target="_blank"><img src="' + photoURL + '"></a>';
      var contentString = '<div id="content">' + htmlString + '</div>';

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

      var myLatlngMarker = new google.maps.LatLng(lat, lng);

      var marker = new google.maps.Marker({
        position: myLatlngMarker,
        map: myMap
      });
      marker.setIcon('https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png');

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(myMap, marker);
      });
    });
  }

});

var myLatlngCenter = new google.maps.LatLng(46.140743, -116.682910);
var mapOptions = {
  center: myLatlngCenter,
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>

Answer 1

Make a single infowindow in the global scope. Re-use it to display the content for each marker. In this example I add the HTML content for the infowindow as a property of the marker, then access it in the marker click event listener with this.htmlContent.

var contentString = '<div id="content">' + htmlString + '</div>';

var myLatlngMarker = new google.maps.LatLng(lat, lng);

var marker = new google.maps.Marker({
  position: myLatlngMarker,
  map: myMap,
  icon: 'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',
  htmlContent: contentString
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent(this.htmlContent);
  infowindow.open(myMap, this);
});

working code snippet:

var lat = 0;
var long = 0;
var infowindow = new google.maps.InfoWindow({});
$(document).ready(function() {

  $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&has_geo=1&extras=geo&format=json&jsoncallback=?", displayImages3);

  function displayImages3(data) {


    $.each(data.photos.photo, function(i, item) {

      lat = item.latitude;
      lng = item.longitude;

      var photoURL = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
      var linkURL = 'https://www.flickr.com/photos/' + item.owner + '/' + item.id + '';
      htmlString = '<a href="' + linkURL + '" target="_blank"><img src="' + photoURL + '"></a>';
      var contentString = '<div id="content">' + htmlString + '</div>';

      var myLatlngMarker = new google.maps.LatLng(lat, lng);

      var marker = new google.maps.Marker({
        position: myLatlngMarker,
        map: myMap,
        icon: 'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',
        htmlContent: contentString
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.htmlContent);
        infowindow.open(myMap, this);
      });
    });
  }

});

var myLatlngCenter = new google.maps.LatLng(46.140743, -116.682910);
var mapOptions = {
  center: myLatlngCenter,
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>