Google maps marker array outputting the same info window content for each marker

Question

I have a map marker array that is built using data from a database, the array builds perfectly, however when i try to loop through the array object, although the markers do appear, and in the correct numbers, the content located within the info windows are the same, and also the id's i've set to output are also identical, it seems to always go to the last object and use that data for every marker.

Could someone possibly point out what i might've done wrong?

The script below in its entirety is the function that is called upon the database getting information successfully. So this entire block is dedicated to displaying the markers retrieved from the database, and their associated information.

function querySuccessMarkers(t, results) {
    var markersArray = {};
    var len = results.rows.length;
    console.log("Markers table: " + len + " rows found");

    for( var i = 0, c = results.rows.length; i < c; i++ ) {
        markersArray[results.rows.item(i).markerid] = {
            id: results.rows.item(i).markerid,
            title: results.rows.item(i).title,
            info: results.rows.item(i).info,
            lat: results.rows.item(i).markerLat,
            lng: results.rows.item(i).markerLng
        };
    }
    console.log(markersArray);

    var markerDetails;
    for (id in markersArray) {
        if( markersArray.hasOwnProperty(id) ) {
            markerDetails = markersArray[id];
            var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerDetails.lat, markerDetails.lng),
                map: map,
                icon: bridgeIcon
            });
            var info_window = new google.maps.InfoWindow({content: ''});
                info_window.content = '<div id="marker-info-win" data-id="'+markerDetails.id+'">' +
                '<h3>Marker Information</h3>' +
                '<input id="warning-title" data-text="Warning Title" />'+
                '<p>'+markerDetails.title+'</p>'+
                '<i class="fa fa-pencil"></i>' +
                '<input id="warning-additional-info" data-text="Warning Additional Information" value="'+markerDetails.info+'"/>'+
                '<i class="fa fa-pencil"></i>';
                google.maps.event.addListener(marker, 'click', function() {
                    info_window.open(map, this);
                });
            console.log(markerDetails);
        }
    }
} 

Answer 1

Fixed code for anyone interested:

function querySuccessMarkers(t, results) {
        var markersArray = [];
        var len = results.rows.length;
        console.log("Markers table: " + len + " rows found");

        for( var i = 0, c = results.rows.length; i < c; i++) {
            markersArray.push(results.rows.item(i));
        }
        console.log(markersArray);


        var info_window = new google.maps.InfoWindow();

        for (i = 0; i < markersArray.length; i++) {
                var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(markersArray[i].markerLat, markersArray[i].markerLng),
                    map: map,
                    icon: bridgeIcon
                });

                console.log(marker);


            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    info_window.setContent('<div id="marker-info-win" data-id="'+markersArray[i].markerid+'">' +
                '<h3>Marker Information</h3>' +
                '<input id="warning-title" data-text="Warning Title" />'+
                '<p>'+markersArray[i].title+'</p>'+
                '<i class="fa fa-pencil"></i>' +
                '<input id="warning-additional-info" data-text="Warning Additional Information" value="'+markersArray[i].info+'"/>'+
                '<i class="fa fa-pencil"></i>');
                    info_window.open(map, marker);
                }
            })(marker, i));
        }
    } 

It was a result of a combination of outputting from the WebSQL database into a normal array, instead of my own array object. Also, adding closure into the click Event Listener for each marker.

For a more in-depth tutorial and guide on how you can achieve the same thing using hardcoded arrays or dynamic: http://chrisltd.com/blog/2013/08/google-map-random-color-pins/