Google Maps API v3 For loop Trouble

Maybe I'm going completely off track with what I'm trying to do, but I'm tempted just to go back to version 2 because I got that working easily (but I would like to be mobile-friendly).

I'm trying to generate a few markers, and to save code, I've put the marker generation into a for loop, which loops through an array of markers (there are actual values instead of (long,lat,x,x,x) in the real array).

Is something just going completely over my head?

 function initialize() {
    var latlng = new google.maps.LatLng(25, 15);
    var myOptions = {
      zoom: 2,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


var myMarker = new Array();
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[0] = new Array(long,lat,x,x,x); 

for(var i = 0; i < myMarker.le开发者_JAVA技巧ngth; i++) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(myMarker[i](1), myMarker[i](2)), 
        map: map, 
        title: myMarker[i](5)
      });
    var infowindow = new google.maps.InfoWindow({content: myMarker[i](5)}); 
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

}

This code works when I make the markers individually.

The problem is that all those listener functions are sharing the same "map" and "marker" values. You need to wrap them up in another function:

(function(map, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
})(map, marker);

The "map" and "marker" variables change on each iteration through the loop. Those listener functions don't have a copy of them unless you explicitly set something up to do that, like I did in that example. Thus, all the listeners end up working on the last thing the loop touched!

edit — actually now that I read over the code again, "map" looks like it's not changing, so it can probably be taken out of my setup (doesn't hurt anything though).

Hmm few things I noticed are the array definitions and accessing them. eg

// here your defining the array, quick tip just use [] instead of new Array(); its faster, in both execution and to type :)
var myMarker = new Array(); 

//here your defining the 1st value in the array at the 0 index
myMarker[0] = new Array(long,lat,x,x,x); 

//but again here your overriding the first value of the array at 0 index
myMarker[0] = new Array(long,lat,x,x,x); 

so it should look more like this

var myMarker = new Array();
myMarker[0] = new Array(long,lat,x,x,x); 
myMarker[1] = new Array(long,lat,x,x,x); 
myMarker[2] = new Array(long,lat,x,x,x); 
myMarker[3] = new Array(long,lat,x,x,x); 
myMarker[4] = new Array(long,lat,x,x,x); 
myMarker[5] = new Array(long,lat,x,x,x); 
myMarker[6] = new Array(long,lat,x,x,x); 

and then when you go to access the values in your array your using

title: myMarker[i](5)

You should have, assuming you have 5 values in each marker array

title: myMarker[i][4]

arrays in javascript are 0 based indexing and use square barkets [] not parentheses.

edit: grammar fixes :)

The problem is that there is only one marker value, and each loop iteration changes it. The event handler functions don't keep track of which marker they need.

The correct way to fix this is to know that the marker is passed into the event handler as this. The simple fix is:

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, this);  // <-- changed 'marker' to 'this'
});