One open infoWindow clicked = rest of infoWindow's hides

Question

as the title - how hides rest of infoWidows when I opened on click once of them ? Now every click equals new infoWindow which stay opened.

I only know that I should set only one infoWindow and I've tried to do this for whole day without results.

I think this section is the reason, but I can't do it different way with the same functionality :

var infoWindow = new google.maps.InfoWindow({
    content: opis[opisIndex++ % opis.length],                           
})

Here's what I've got:

var sourceLocation = {lat: 52.277255, lng: 16.995763};
var destinationLocations = [
    {lat: 52.278568, lng: 16.991688},
    {lat: 52.289379, lng: 16.9790611},
    {lat: 52.287274, lng: 16.999355}
];
var directionsService;
var directionsDisplay;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: 52.285594, lng: 16.994291},
              zoom: 14
          });
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        markerOptions: {
            visible: false
        }
    });
    createSourceMarker();
    createDestinationMarkers();
}

function markerClicked(destinationLocation) {
    var directionsRequest = {
        origin: sourceLocation,
        destination: destinationLocation,
        travelMode: 'DRIVING'
    };

    directionsService.route(directionsRequest, handleDirectionResults);
}

function handleDirectionResults(result, status) {
    if (status === 'OK') {
        directionsDisplay.setDirections(result);
    } else {
        console.log(status);
    }
}


function createSourceMarker() {
    new google.maps.Marker({
        position: sourceLocation,
        map: map,
        label: {
            text: 'S',
        }
    });
}



var opis = [
    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Szkoła Podstawowa</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Odległość :</b>' + '  5 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  5 min</p>' +
    '</div>'+
    '</div>',

    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Galeria MINI</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Odległość :</b>' + '  6 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  6 min</p>' +
    '</div>'+
    '</div>',

    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Kościół</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Odległość :</b>' + '  10 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  10 min</p>' +
    '</div>'+
    '</div>',       
];
var opisIndex = 0;

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';


var markers = [
    iconBase + 'parking_lot_maps.png',
    iconBase + 'library_maps.png',
    iconBase + 'info-i_maps.png'
];
var markersIndex = 0;


function createDestinationMarkers() {
    destinationLocations.forEach(function(location, index) {
        var marker = new google.maps.Marker({
            position: location,
            map:map,
            icon: markers[markersIndex++ % markers.length],
            animation: google.maps.Animation.DROP,
        });

        var infoWindow = new google.maps.InfoWindow({
            content: opis[opisIndex++ % opis.length],                           
        })

        marker.addListener('click', function(){
            infoWindow.open(map, marker);
        });

        marker.addListener('click', function() {
            markerClicked(location);
            });
        })

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
}

Answer 1

If you only ever want one InfoWindow open, only create one, and move it to the appropriate marker, setting the content appropriately.

marker.addListener('click', function(){
   infoWindow.setContent(opis[opisIndex++ % opis.length]);                          
   infoWindow.open(map, marker);
});

proof of concept fiddle

code snippet:

var directionsService;
var directionsDisplay;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 52.285594,
      lng: 16.994291
    },
    zoom: 14
  });
  infoWindow = new google.maps.InfoWindow();
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    markerOptions: {
      visible: false
    }
  });
  createSourceMarker();
  createDestinationMarkers();
}

function markerClicked(destinationLocation) {
  var directionsRequest = {
    origin: sourceLocation,
    destination: destinationLocation,
    travelMode: 'DRIVING'
  };

  directionsService.route(directionsRequest, handleDirectionResults);
}

function handleDirectionResults(result, status) {
  if (status === 'OK') {
    directionsDisplay.setDirections(result);
  } else {
    console.log(status);
  }
}


function createSourceMarker() {
  new google.maps.Marker({
    position: sourceLocation,
    map: map,
    label: {
      text: 'S',
    }
  });
}

var opis = [

  '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h2 id="firstHeading" class="firstHeading">Szkoła Podstawowa</h2>' +
  '<div id="bodyContent">' +
  '<p><b>Odległość :</b>' + '  5 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  5 min</p>' +
  '</div>' +
  '</div>',

  '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h2 id="firstHeading" class="firstHeading">Galeria MINI</h2>' +
  '<div id="bodyContent">' +
  '<p><b>Odległość :</b>' + '  6 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  6 min</p>' +
  '</div>' +
  '</div>',

  '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h2 id="firstHeading" class="firstHeading">Kościół</h2>' +
  '<div id="bodyContent">' +
  '<p><b>Odległość :</b>' + '  10 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  10 min</p>' +
  '</div>' +
  '</div>',

];
var opisIndex = 0;

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var markers = [
  iconBase + 'parking_lot_maps.png',
  iconBase + 'library_maps.png',
  iconBase + 'info-i_maps.png'
];
var markersIndex = 0;

function createDestinationMarkers() {
  destinationLocations.forEach(function(location, index) {
    var opisIndex = markersIndex;
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      icon: markers[markersIndex++ % markers.length],
      animation: google.maps.Animation.DROP,
    });

    marker.addListener('click', function() {
      infoWindow.setContent(opis[opisIndex % opis.length]);
      infoWindow.open(map, marker);
    });
    marker.addListener('click', function() {
      markerClicked(location);
    });
  })

  function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
}
google.maps.event.addDomListener(window, "load", initMap);
var sourceLocation = {
  lat: 52.277255,
  lng: 16.995763
};
var destinationLocations = [{
    lat: 52.278568,
    lng: 16.991688
  },
  {
    lat: 52.289379,
    lng: 16.9790611
  },
  {
    lat: 52.287274,
    lng: 16.999355
  }
];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>