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

});

possible duplicate of [Google Maps API V3 infoWindow - All infoWindows displaying same content](http://stackoverflow.com/questions/4897316/google-maps-api-v3-infowindow-all-infowindows-displaying-same-content) — geocodezip, Jul 02 '13 at 13:02
possible duplicate of [Google Maps Api v3: Info window displaying same information for all the markers on the map](http://stackoverflow.com/questions/4236522/google-maps-api-v3-info-window-displaying-same-information-for-all-the-markers) — geocodezip, Jul 02 '13 at 13:04
possible duplicate of [Google Maps API Multiple Markers with Infowindows](http://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows) — geocodezip, Jul 02 '13 at 13:05
possible duplicate of [Multiple InfoWindows](http://stackoverflow.com/questions/11439586/multiple-infowindows) — geocodezip, Jul 02 '13 at 13:06
@geocodezip - none of those links are really helpful besides the first, and I'd like to accomplish this without closure if possible... (I think it should be possible) — froadie, Jul 02 '13 at 18:35
Sure it is possible. I don't do it that way, but there are examples that do, if you search SO and/or the [Google Maps API v3 user group](https://groups.google.com/forum/#!forum/google-maps-js-api-v3), you will find them. You haven't provided enough code to replicate the problem (or a link/jsfiddle that does), so all I could do was provide those examples (all of which happen to use closure to fix the issue). — geocodezip, Jul 02 '13 at 18:47

score 0 · Accepted Answer · answered Jul 04 '13 at 18:54

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
});

score -1 · Answer 2 · answered Jul 02 '13 at 09:57

-1

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
});

answered Jul 02 '13 at 09:57

Pirates

190
1
10

Doesn't seem to help... Causes all the infoboxes to open the same infobox in the same spot (over the last state) – froadie Jul 02 '13 at 10:09

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

2 Answers2