Javascript variables not propagating through

Question

I'm using OpenLayers with Waze (Maps layers) and having some problems with variables not propagating. I've got this code:

    var lonlat = new Array(), infodiv = new Array();

    for (var i = 0; i < stations.length; i++)
    {
        if (i == 0)
            icon_temp = icon;
        else
            icon_temp = icon.clone();

        lonlat[i] = new OpenLayers.LonLat(stations[i].lon,stations[i].lat);
        infodiv[i] = "<div style='font-size: 14px;'><strong>" + stations[i].company + "</strong></div>";

        marker = new OpenLayers.Marker(lonlat[i],icon_temp);
        marker.setOpacity(0.8);

        marker.events.register('mousedown', marker, function(evt) {
            popup = new OpenLayers.Popup.FramedCloud(null,
                               lonlat[i],
                               null,
                               infodiv[i],
                               anchor=null,true,null);

            map.addPopup(popup);

            OpenLayers.Event.stop(evt); 

        });

        markers.addMarker(marker);
    }

The code should iterate through the 'stations' array and add markers to the map. It works just fine!

The problem is with the 'lonlat' and 'infodiv' arrays. The 'OpenLayers.Popup.FramedCloud' doesn't see them - it is returned null (checked using FireBug). If I lose the array and only assign each time lonlat = ... and infodiv = ... like this:

    for (var i = 0; i < stations.length; i++)
    {
        if (i == 0)
            icon_temp = icon;
        else
            icon_temp = icon.clone();

        lonlat = new OpenLayers.LonLat(stations[i].lon,stations[i].lat);
        infodiv = "<div style='font-size: 14px;'><strong>" + stations[i].company + "</strong></div>";

        marker = new OpenLayers.Marker(lonlat,icon_temp);
        marker.setOpacity(0.8);

        marker.events.register('mousedown', marker, function(evt) {
            popup = new OpenLayers.Popup.FramedCloud(null,
                               lonlat,
                               null,
                               infodiv,
                               anchor=null,true,null);

            map.addPopup(popup);

            OpenLayers.Event.stop(evt); 

        });

        markers.addMarker(marker);
    }

it is being propagated to the FrameCloud function and is being shown - but then the problem is it shows only the last lonlat and infodiv (it's like it doesn't hold a copy of them but holds the actual objects - so every iteration 'lonlat' and 'infodiv' are being replaced by the latest info).

How can this be overcome?

Answer 1

This is due to closure of variable i.

Introduce another scope like,

(function(i){
marker.events.register('mousedown', marker, function(evt) { 
                    popup = new OpenLayers.Popup.FramedCloud(null, 
                                       lonlat[i], 
                                       null, 
                                       infodiv[i], 
                                       anchor=null,true,null); 

                    map.addPopup(popup); 

                    OpenLayers.Event.stop(evt);  

                });
})(i);