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>

Yes, generally speaking the preferred method is to initialize one infoWindow as a global object, then change its location and content on marker click. See http://www.geocodezip.com for examples — lucas, Nov 14 '15 at 22:16
@eugensunic I tried putting my code into jsfiddle but I have no idea how to separate the html from the javascript from the css and make it work on there. [Here's my attempt](https://jsfiddle.net/j2k24kLa/), it's probably completely wrong. I didn't want to copy my entire code into my post here so I linked to my map, where you can view the source code. — merzperson, Nov 14 '15 at 23:37
possible duplicate of [Have just one InfoWindow open in Google Maps API v3](http://stackoverflow.com/questions/1875596/have-just-one-infowindow-open-in-google-maps-api-v3) — geocodezip, Nov 15 '15 at 00:11

geocodezip · Accepted Answer · 2022-10-06T04:06:20.877

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>

Google Maps API - only one infowindow open at once

1 Answers1

Linked

Related