CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
gleff
gleff

Reputation: 51

Google Maps Utility Library v3 - Infoboxes not closing

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?

Upvotes: 1

Views: 1308

Answers (1)

dda
dda

Reputation: 6203

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).

Upvotes: 1

Related Questions