Opening only a infobox at a time when multiple markers are displayed on the map

Question

I have a createMarker() function that is used to place multiple markers on the google map. The following is the code:

     function createMarker(point,custid,streetadd,city,state,zip,address,phone,website,co) 
    {   
        var infowindowHover,infowindowClick;

        var marker = new google.maps.Marker({                
            position: point,                
            map: map,
            icon: image, 
        });

        var boxClickText = document.createElement("div");            
        boxClickText.className = "infoBackground";

        var markerMarkup = "<div id='infobox'><TABLE class='test'><TR><TD colspan='2'><B class='title'>";
            markerMarkup = markerMarkup + co + "</B></TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + streetadd + "</TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + city + "," + state + " " + zip + "</TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + phone + "</TD></TR><TR><TD colspan='2'>";
            if(website.indexOf("http://")>0) { markerMarkup = markerMarkup +"<a href="; }
            else{  markerMarkup = markerMarkup +"<a href=http://"; }
            markerMarkup = markerMarkup + website + " target=_blank>" + website + "</a></TD></TR><TR><TD class='availableStyle'>";                
            markerMarkup = markerMarkup +'<a href="javascript:;" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')";">see available styles</a>';

            //markerMarkup = markerMarkup + '<input type="button" value="see available styles" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')" />';
markerMarkup = markerMarkup + "</TD></TR></TABLE></div>";

        boxClickText.innerHTML = markerMarkup;


        var myOptions_click = {
            content: boxClickText
        //,disableAutoPan: true
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-140, 0)
        ,zIndex: null
        ,boxStyle: {                 
            //opacity: 0.75
            //,width: "280px"
            margin:"-58px 0px 0px 148px"
            }
        ,closeBoxMargin: "10px 2px 2px 2px"
        ,closeBoxURL: "http://mansi:2525/pc-new/images/mapclosebutton.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,id: "infoWindowClick"
        ,enableEventPropagation: false
        };

        var ib = new InfoBox();

        google.maps.event.addListener(marker, "click", function (e) {
            ib.close();
            ib.setOptions(myOptions_click);
            ib.open(map, this);
        });

        return marker;

    }  

I have referred similar question from Google Map V3 - Allow only one infobox to be displayed at a time and applied the code in the same way but I am not getting the desired result.

Google Map V3 - Allow only one infobox to be displayed at a time

Answer 1

You declare a new infobox every time you create a marker. So 'ib' refers to the infobox created for that marker and not the others.

You need to set the infobox variable outside the createMarker function scope. Then inside your event listener, close the old infobox and then create a new one.

var ib;

function createMarker(<params>) {
     google.maps.event.addListener(marker, "click", function (e) {
        if (typeof ib === 'object') {
            ib.close();
        }
        ib = new Infobox();
        ib.setOptions(myOptions_click);
        ib.open(map, this);
    });
}

If you need a new infobox for each marker, then you could store an array of infoboxes.

var ibs = [];

var closeInfoBox = function() {
    for (var i in ibs) {
        ibs[i].close();
    }
}

function createMarker(<params>) {
    var ibIndex = ibs.push(new Infobox()) - 1,
        ib = ibs[ibIndex];

    google.maps.event.addListener(marker, "click", function (e) {
        closeInfoBox();
        ib.setOptions(myOptions_click);
        ib.open(map, this);
    });

}