Google Maps Utility Library v3 - Infoboxes not closing - google-maps

Question

I'm using Infobox from the Google Maps Utility Library V3 and I'm having a bit of trouble removing all Infoboxes in one go without keeping track of all the infoboxes or adding an event listen.
I'm currently using the following code.
function initMarkers(map, markerData) {
for(var i=0; i<markerData.length; i++) {
var iconimage = "markers/" + trackall + ".png";
marker = new google.maps.Marker({
map: map,
draggable: false,
position: markerData[i].latLng,
visible: true,
icon: iconimage
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText
,disableAutoPan: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(20, -75)
,zIndex: null
,boxStyle: {
background: "url('') no-repeat"
,opacity: 0.75
,width: "140px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: ""
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid black; margin-top: 5px; background: #E0E7EF; padding: 5px;";
boxText.innerHTML = markerData[i].address + "<br>" + markerData[i].state;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
//Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates
//a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function,
//the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
//serves the same purpose) is often needed when setting function callbacks inside a for-loop.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//newMarkers[i].infobox.open(map, this);
//map.panTo(markerData[i].latLng);
//newMarkers[i].infobox.close();
/}
})(marker, i));
}
return newMarkers;
}
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
{ latLng: pointall}
]);
In the above example I'm using the variable pointall which contains the ever changing marker information. The site is a flight tracking site so it tracks any number of aircraft at different locations constantly. Every time there's an update eg. new markers to plot, I use the following function to remove the old markers first.
function clearOverlays() {
if (newMarkers) {
for (var i = 0; i < newMarkers.length; i++ ) {
newMarkers[i].setMap(null);
}
}
}
The above removes all the markers but if I add
newMarkers[i].infobox.close();
It deletes the first marker but stops executing code.
Is there an easy way of just saying.. Close all open Infoboxes. I don't need to know which is which as they will all need to be closed. Currently the infoboxes are opened with the new marker but the old infobox is staying.
Note: I'm not advanced with javascript so be easy on me ;)
Any help would be appreciated.
Thanks
Edit: I'm not having much luck here. As suggested I've tried creating an array to hold the Infoboxes but I must be doing something wrong.
I've tried adding the following declaration:
ibArray = [];
I've then tried adding :
ibArray.push(marker);
I've added the above in several locations including immediately after pushing the marker into the newMarkers array but no matter where I place the code It's breaking the rest of my code and not displaying any infoboxes.
I suspect I've got the syntax incorrect, and I also can't work out where to place the code.
Can anyone else help?

Answer 1

You should do the same you're doing for the markers, ie keep track of the infoWindows and loop through the array, closing them (and removing them from the array).