Google Maps utility Library v3 - Infobox array?

Question

I'm really stuck here. If anyone can help it would be greatly appreciated.

I've based all my code around the following : google maps api infobox plugin and multiple markers This code allows you to have multiple markers but it doesn't put the infoboxes into an array for closing later. This is where I'm having trouble.

Essentially, I just need to have multiple markers, and multiple infoboxes, and be able to keep track of both in arrays so I can delete them all from the map and start again with new markers and infoboxes. The site is a flight tracker so the markers and infoboxes are constantly changing. I just can't seem to be able keep track of all the infoboxes for mass removal. Nothing I do seems to work as every time I make a change it breaks my existing code for the site.

Here is all my affected code. You'll see by all the commented out code that I've been trying all sorts of things.

Any assistance is appreciated.

newMarkers = [],
        marker;
ibArray = [];




function initialize() {
chatswood = new google.maps.LatLng(-33.945759, 151.180358);
myMapOptions = {
zoom: 9
,center: chatswood
,mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
}



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");
        boxText.style.cssText = "border: 1px solid black; margin-top: 5px;   background:  #E0E7EF; padding: 5px;";
        boxText.innerHTML = markerData[i].address + "<br>" + markerData[i].state;
        //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); //Adding the marker to the newMarkers Array
        newMarkers[i].infobox = new InfoBox(infoboxOptions); //Create new Infobox
        newMarkers[i].infobox.open(map, marker); //Open Infobox

        // ibArray.push({myId:ModeS,box: ib});
        //ibArray.push(marker);
        //ib[i] = new InfoBox(infoboxOptions);
        //ibArray.push({myId: ModeS,box: ib});
        //ib.open(map, marker);
        // ibArray.push({myId:ModeS,box: ib});
        //Open box when page is loaded
        //ibArray.push({myId:"ModeS",box: newMarkers});


// 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);
// }
// })(marker, i));
//-------------------------------------------------------------------------

}
    return newMarkers;
}

// Note: I commented out the listener event because the Infoboxes are to appear
// automatically and there won't be any user interaction on the individual
// markers. Going by the comments above though I believe I need to return
// the function but I'm not sure how if I'm not using the listener event.

// 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} 

]);

boxText.innerHTML = aircrafttooltip; 

//Function to close the Infoboxes
function closeBox(id){

   for (i=0;i<ibArray.length;i++) {
     if (ibArray[i].myId==id){
         myBox = ibArray[i].box;
         myBox.close();
     }
   }
}



// Function to remove markers
function clearOverlays() {
  if (newMarkers) {
    for (var i = 0; i < newMarkers.length; i++ ) {
      newMarkers[i].setMap(null);
    }
      newMarkers.length = 0;
  }
}