Looping over google map markers with jquery not working

I have a page that shows a map and a list of names. The markers are showing up on the map and the list is populating correctly, however I can not seem to get the marker to open up with the correct contentstring value when clicking on the marker or the list.

When clicking the marker it always displays the last contentstring and when click on an item in the list it always opens the last marker in the series.

I hope this enough information to go on. I just doenst appear that the infowindow.setcontent and infowindow.open are picking up the correct item number.

    HERE ARE SOME VARIABLES THAT ARE BEING USED IN THE CODE BELOW:
    data[i][3] = firstname
    data[i][4] = lastname
    data[i][6] = latitude
 开发者_StackOverflow   data[i][7] = longitude

any help will be greatly appreciated!

Thanks Kevin

    contentString = new Array();

    for (var I = 0; I < data.length; I++) {

contentString[I] = '<b>' + data[I][3] + ' ' + data[I][4] + '</b>';
var thismarker = I;
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data[I][6],data[I][7]),
    map: map,
    zIndex: I
});
$("<li />")
    .html('<span class="leadid">' + I + '</span>' + '<div class="leadname">' + data[I][3] + ' ' + data[I][4] + '</div>')
    .click(function(){
        infowindow.close();
        infowindow.setContent(contentString[thismarker]);
        infowindow.open(map, markers[thismarker]);
    })
.appendTo("#leadList"); 
google.maps.event.addListener(marker, "click", function(e){
    infowindow.close();
    infowindow.setContent(contentString[thismarker]);
    infowindow.open(map, markers[thismarker]);
});
markers[I] = marker;
    }

The problem here is that you're setting the click handlers in a loop and trying to reference the loop variable I (through thismarker - it's the same thing here) within the closure. The variables I and thismarker are getting updated on each loop iteration, and the references within the click handlers get updated too. So within all the click handlers, thismarker refers to the last value assigned to that variable. (This is why it's generally a bad idea to define functions in a loop if you can avoid it.)

There are a few different ways to fix this; the easiest, though not necessarily the most beautiful, is to wrap the code in question in an anonymous function and pass in the loop variable as an argument:

for (var I = 0; I < data.length; I++) {
    // ... snip ...

    // start of anonymous function
    (function(thismarker) {
        // within the scope of this function,
        // "thismarker" will work as expected
        $("<li />")
            .html('<span class="leadid">' + I + '</span>' + '<div class="leadname">' + data[I][3] + ' ' + data[I][4] + '</div>')
            .click(function(){
                infowindow.close();
                infowindow.setContent(contentString[thismarker]);
                infowindow.open(map, markers[thismarker]);
            })
            .appendTo("#leadList"); 
        google.maps.event.addListener(marker, "click", function(e){
            infowindow.close();
            infowindow.setContent(contentString[thismarker]);
            infowindow.open(map, markers[thismarker]);
        });
    })(I); // end anonymous function, calling with loop variable
}