Google Maps API: infobox in a loop - why are all infoboxes displaying the last value?

Question

I basically have an array of states, and I loop through them, create a marker for each state, and then create an infobox that should appear when hovering over each marker (and disappear on mouseout). My trouble is that while the markers are appearing properly, the infoboxes for all state markers are displaying the last infobox content. This probably has to do something with variable scoping and/or asynchronous execution - how can I fix it?

(When I step through it with a debugger like Firebug it seems to be building the text correctly for each state - but somehow it displays the same info for all at the end)

Applicable code in the loop (somewhat simplified):

mark = new google.maps.Marker({          
        map: map,             
        position: center,
        icon:markerImage,
        stateIndex: i // custom attribute for state index so that we can access allStates[index] from within the marker event callbacks
    });
stateMarkers.push(mark);

// text for info box
var info = statesArray[i].name + "<br/>" + "Total: " + statesArray[i].total + "<br/>";

//set text for infoBox
var boxText = '<div class="stateMarker">' + info + '</div>';

//set options for infoBox
var myOptions = {
    content: boxText,
    disableAutoPan: true,
    maxWidth: 0,
    zIndex: null,
    boxStyle: { 
      background: "url('tipbox.gif') no-repeat",
      opacity: 1,
      width: "75px"
     },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
};

//instantiate infoBox with options set in myOptions
var ib = new InfoBox(myOptions);

//create mouseover listener for marker on each state
google.maps.event.addListener(mark, 'mouseover', function () {
    ib.open(map, this); //open infoBox
});

//create mouseout listener for marker on each state
google.maps.event.addListener(mark, 'mouseout',function(){
    ib.close(map,this); //close infoBox

});

Answer 1

What I ended up doing:

Declared the infobox before the marker, and added the infobox as a custom attribute to the marker - this way, each state marker has an infobox with the correct text attached to it.

// text for info box
var info = statesArray[i].name + "<br/>" + "Total: " + statesArray[i].total + "<br/>";

//set text for infoBox
var boxText = '<div class="stateMarker">' + info + '</div>';

//set options for infoBox
var myOptions = {
    content: boxText,
    disableAutoPan: true,
    maxWidth: 0,
    zIndex: null,
    boxStyle: { 
      background: "url('tipbox.gif') no-repeat",
      opacity: 1,
      width: "75px"
     },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
};

//instantiate infoBox with options set in myOptions
var ib = new InfoBox(myOptions);

mark = new google.maps.Marker({          
        map: map,             
        position: center,
        icon:markerImage,
        stateIndex: i, // custom attribute for state index so that we can access allStates[index] from within the marker event callbacks
        infobox: ib
    });
stateMarkers.push(mark);

//create mouseover listener for marker on each state
google.maps.event.addListener(mark, 'mouseover', function () {
    this.infobox.open(map, this); //open infoBox
});

//create mouseout listener for marker on each state
google.maps.event.addListener(mark, 'mouseout',function(){
    this.infobox.close(map,this); //close infoBox
});

Answer 2

Your code seems to perfect but Just change and try like this:

 ib.open(map, mark) instead ib.open(map, this)

i.e:

//create mouseover listener for marker on each state
google.maps.event.addListener(mark, 'mouseover', function () 
{
   ib.open(map, mark); //open infoBox
});

//create mouseout listener for marker on each state
google.maps.event.addListener(mark, 'mouseout',function()
{
   ib.close(map,mark); //close infoBox
});