Google Maps infobox showing the previous clicked location

On my site I have a map with quit some items. Normally when you click on them, a pop-up box shows some info. Now the issue is that, when I click on location 1, the box 1 opens. But when clicking on location 2, the box opens at location 1. When clicking on location 3, the box opens at location 2, when clicking on location 4, the box opens at location 3, etc.

Here's the first lines of code:

var infoBox_ratingType='star-rating';(function($){"use strict";function mainMap(){var ib=new InfoBox();function locationData(locationURL,NewTab,locationImg,locationTitle,locationAddress){return(''+'<a href="'+ locationURL+'" ' + (NewTab ? 'target="_blank"' : '') +' class="listing-img-container">'+'<div class="infoBox-close"><i class="fa fa-times"></i></div>'+'<img src="'+locationImg+'" alt="">'+'<div class="listing-item-content">'+'<h3>'+locationTitle+'</h3>'+'<span>'+locationAddress+'</span>'+'</div>'+'</a>')}

var locations=[
[locationData('https://www.lichaamengeest.be/sauna/kuurcentrum.php','','https://www.lichaamengeest.be/sauna/kuurcentrum/kuurcentrum.jpg',"Wellnesscentrum Yolande Buekers",'Langstraat 31<br>3830 Wellen'),50.819357,5.309640,1,'<i class="im im-icon-Green-House"></i>'],

Also, when trying to click on the close X of the infobox, the link gets activated. You can see the page with maps here: enter link description here with full js file here: enter link description here I guess it is a javascript error, so could anyone please help me out what the issue is here, please? Thanks!

Solution

if infobox is open try closing it and then open infobox on new marker(overlay).

Update the below function from

return function() {
             ib.setOptions(boxOptions);
             boxText.innerHTML = locations[i][0];
             ib.open(map, overlay);

this to

return function() {
                 ib.setOptions(boxOptions);
                 boxText.innerHTML = locations[i][0];
                 ib.close();
                 ib.open(map, overlay);