Javascript variable problem, simple question

Question

var num = rez.data.length;

for(var key=0;key<num;key++)
{
  var marker = [];
  var point  = new GLatLng(rez.data[key].latitude, rez.data[key].longitude);
  marker[key] = new GMarker(point, {icon: iconS});
  GEvent.addListener(marker[key], "click", function() 
  {
    marker[key].openInfoWindowHtml('xxxxxx');
  });
  map.getMap().addOverlay(marker[key]); 
}

I need help here, can anyone tell me why is marker[key] in line marker[key].openInfoWindowHtml('xxxxxx'); undefined? I defined it here: marker[key] = new GMarker(point, {icon: iconS});

Answer 1

You should define the marker array before going into that loop...

var num = rez.data.length;
var marker = [];

for(var key=0;key<num;key++)
{
  var point  = new GLatLng(rez.data[key].latitude, rez.data[key].longitude);
  marker[key] = new GMarker(point, {icon: iconS});
    GEvent.addListener(marker[key], "click", function() 
    {
      marker[key].openInfoWindowHtml('xxxxxx');
    });
  map.getMap().addOverlay(marker[key]); 
}

...otherwise it will be reseted every time the loop is run and there will be only one marker in the array at index num - 1.

Answer 2

1: Are you sure new GMarker(point, {icon: iconS}) returned a valid result? You dont seem to check for validity

2: marker[key] is only defined in the base loop. When you call GEvent.addListener you basically create an anonymous function. The marker variable may not be defined in that scope. Either use bind() or declare it globally.

Answer 3

Apart from what the other answers indicate, you have another problem.

Your key variable is scoped outside your inner event handler function. What happens is that each time you increment key, you are changing the value that will be used in the event handler.

Effectively, let's say num equals 10. All click event handlers will end up calling the following code:

function() {
    marker[10].openInfoWindowHtml('xxxxxx');
}

One way to fix this is to scope the loop contents inside another function and invoke it immediately:

var num = rez.data.length;
var marker = [];
for(var key=0;key<num;key++)
{
  var point  = new GLatLng(rez.data[key].latitude, rez.data[key].longitude);
  marker[key] = new GMarker(point, {icon: iconS});
  function(key) {
    GEvent.addListener(marker[key], "click", function() {
      marker[key].openInfoWindowHtml('xxxxxx');
    });
  }(key);
  map.getMap().addOverlay(marker[key]); 
}

Edit: To clarify. What I do is that I declare an anonymous function, which I immediately invoke. Another way to see more clearly what is happening, the

function(key) {
  GEvent.addListener(marker[key], "click", function() {
    marker[key].openInfoWindowHtml('xxxxxx');
  });
}(key);

can be replaced by:

function temp(key) {
  GEvent.addListener(marker[key], "click", function() {
    marker[key].openInfoWindowHtml('xxxxxx');
  });
};

temp(key);

I.e., first declare a temporary function called temp, then invoke it the row after.

Answer 4

key is accessed from the closure - all the listener functions will share the same key. After the for loop is over, key should be equal to num, and obviously marker[num] would be undefined. You can verify this with alert(key) in the handler.

You want the specific key used when the listener function is defined. You can do it by creating the listener function in a context where the input is stable, for example like this:

function createListener(marker) {
  return function() {
    marker.openInfoWindowHtml('xxxxxx');
  };
}

var num = rez.data.length;

var markers = [];
for(var key=0;key<num;key++)
{
  var point  = new GLatLng(rez.data[key].latitude, rez.data[key].longitude);
  var marker = new GMarker(point, {icon: iconS});
  markers[key] = marker;
  GEvent.addListener(marker, "click", createListener(marker));
  map.getMap().addOverlay(marker); 
}