jquery string value not getting passed into google map object inside loop

Question

Why is the string lost inside the object within a loop?

for (var i = 0; i < nrow.length - 1; i++) {
displayNote = "<b>" + nfield[0] + "</b><br />" + nfield[1] + " " + nfield[2] + "<br /> " + nfield[7];
$('#googleMap').gmap3({
    action: 'addMarker',
    lat: parseFloat(nfield[5]),
    lng: parseFloat(nfield[6]),
    events: {
        mouseover: function (marker, event) {
            var map = $(this).gmap3('get'),
            infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' });
            if (infowindow) {
                infowindow.open(map, marker);
                infowindow.setContent(displayNote);

displayNote only displays the first increment for all the other infowindow

Answer 1

at the end of for loop execution displayNote will contain last value. And InfoWindow will show last displayNote on mouseover. You can save displayNote for each iteration by creating new function

function attachEvent( displayNote, nfield ){
  $('#googleMap').gmap3({
    action: 'addMarker',
    lat: parseFloat(nfield[5]),
    lng: parseFloat(nfield[6]),
    events: {
        mouseover: function (marker, event) {
            var map = $(this).gmap3('get'),
            infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' });
            if (infowindow) {
                infowindow.open(map, marker);
                infowindow.setContent(displayNote);



}


for (var i = 0; i < nrow.length - 1; i++) {
displayNote = "<b>" + nfield[0] + "</b><br />" + nfield[1] + " " + nfield[2] + "<br /> " + nfield[7];
attachEvent( displayNote, nfield  );
}