JavaScript array traverse manualy works, but by loop doesn't

Question

Hi, I'm putting google maps markers into array, and everything works fine, when i do it manually:

var m =[];

   m[0] = new google.maps.Marker(.....

   google.maps.event.addListener(m[0], 'click', function() 
   {
    alert('Markerklik');
    $("#trasa").append(m[0].getPosition().toString()+"<br>");
   });  

   m[1] = new google.maps.Marker( .....

   google.maps.event.addListener(m[1], 'click', function() 
   {
    alert('Markerklik');
    $("#trasa").append(m[1].getPosition().toString()+"<br>");
   }); 

But if i want to loop with for:

    for ( var i=0 ; i<2; i++ )
{
// do the same with m[i]
}

Im getting m[i] is undefined when clicking a marker (m[i].getPosition()).

Any suggestions how to do it automatically with loop ?

Note, that if i put marker into variable temp, add listener to temp and do a m.push( temp ); in loop - clicking on any marker giving me position of last added marker.

This looks like adding a event to m[i] doesn't even check value of i, it's not looking for m[1] for example, but something like variable "named" m[i]

if i do all the code manualy with m[0] and m[1] - everythings work fine, there are events connected to m[0] and m[1], but creating markers with for loop with m[i] looks like binding event not to m[0] and after one loop m[1], but adding event to "m[i]" when i is just letter i, not a value of i

Ok, looks like this code from a response works:

for (var i=0 ; i<2; i++ ) 
  {
   (function(x) {
    m[x] = new google.maps.Marker( {
     position: getRandomPoint(),
     title: 'Mojmarkers'
    });

    google.maps.event.addListener(m[x], 'click', function() {
     alert('Markerklik');
     $("#trasa").append(m[x].getPosition().toString()+"<br>");
    }); 

    return m[x];
   })(i);
  }

Anyone can explain why this unusual solution works as i want ?

Answer 1

Try removing the var from your for statement.

Answer 2

make use of length property and than try

for ( var i=0 ; i<m.length; i++ )
{
// do the same with m[i]
}

or use for...in

<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (x in mycars)
  {
  document.write(mycars[x] + "<br />");
  }
</script>

Answer 3

Try using

m.push(new google.maps.marker...);

And then as Pranay mentions, use the length property and loop through the m array.

Answer 4

What happens if you create a marker object in a separate function that returns marker, add an event listener to it in the create function, and then place that object in the array outside the function?

Answer 5

You can try this code below, it could a closure memory problem.

for (var i=0 ; i<2; i++ ) {
    (function(i) {
        m[x] = new google.maps.Marker(.... ;
        return  google.maps.event.addListener(m[x], 'click', function() {
            alert('Markerklik');
            $("#trasa").append(m[x].getPosition().toString()+"<br>");
         });
    })(x);
}