I'm encountering a problem with my implementation of the InfoBox and I'm looking for insights on potential solutions.
Currently, I have around 1000 client-side markers that are dynamically added to the page. They are created using the following code snippet:
var cir = new google.maps.Marker({
position: new google.maps.LatLng(l.lat, l.lng),
map: map,
icon: icons[l.type].simple
});
addClickHandlerAjax(cir, l);
l.m = cir;
The addClickHandlerAjax method is triggered when a marker is clicked. Here's the basic structure of this method:
function addClickHandlerAjax(marker, l) {
google.maps.event.addListener(marker, "click", function () {
if(theInfoWindow){
theInfoWindow.close();
// InfoWindow = null;
}
//fetch content via ajax
$.ajax({
url: 'map/getInfo',
type: 'get',
data: {
'ID': l.f
},
success: function (data, status) {
if (status == "success") {
//create infowindow here..
theInfoWindow= new InfoBox({
content: document.getElementById("infobox-wrapper-hotel"),
disableAutoPan: true,
enableEventPropagation: true,
closeBoxURL: '../assets/images/info-close.png',
});
theInfoWindow.open(map, marker);
touchScroll('rab-scroll');
});
}
},
error: function (xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
}); // end ajax call
});
}
The issue arises when users click on multiple markers quickly, causing the infobox of a previous marker to remain open, possibly empty.
Is there a proper way to manage multiple infobox instances by ensuring all infoboxes are safely closed?
This behavior is not observed in this example Jsfiddle