Hier ist die Karte, an der ich arbeite. Ich versuche, immer nur ein Infofenster zu öffnen, und das geöffnete Infofenster wird geschlossen, wenn auf die Karte oder eine andere Markierung geklickt wird.

Ich weiß, dass dies bereits mehrmals gefragt und beantwortet wurde, aber ich habe versucht, diese Beispiele durchzugehen, und kann nicht herausfinden, wie ich sie auf meinen spezifischen Code anwenden kann, der Fotos von Flickr abruft und sie in Infofenster kopiert, die mit verknüpft sind Marker. Ich bin mir ziemlich sicher, dass die Lösung darin besteht, ein einziges Infofenster zu erstellen und dessen Inhalt zu ändern.

aktuelles Problem beim Anzeigen der Geige

Code-Snippet (von der Geige):

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>