How can I create Google Map markers in a loop like "Marker1", "Marker2"

Question

Sorry for that newbie's question, but I didn't found any idea for that issue...

I would to create 4 markers (or more, but here it's 4) on a Google Map. I get the informations with a GET ajax request, responding with JSON. I'm able to create those markers, but I have a problem with the information window for each marker.

here the code I tried :

    function readDevices(output){
// Get an array for the 4 devices with guid 42421 42422 42423 and 42424
        var arrayOfDevices = new Array();
        $.each(output.data, function(key, value){
            $.each(value, function(deviceKey, deviceValue){
                if(deviceKey == 'guid' && deviceValue >= 42421 && deviceValue <= 42424){
                    arrayOfDevices.push(value); // add the entire object in the tab
                }
            });
        });

        for(var i = 0; i < arrayOfDevices.length; i++){
            var guid = arrayOfDevices[i]["guid"];
            var latitude = arrayOfDevices[i]["latitude"];
            var longitude = arrayOfDevices[i]["longitude"];
            var name = arrayOfDevices[i]["name"];
            var coord = new google.maps.LatLng(latitude, longitude);

            var contentString = '<div id="content">'+
                '<form method="get" action="manual" id="form-new">'+
                    '<button type="submit" id="new-button" name="'+guid+'" class="btn new-btn">Manual</button>'+
                '</form>'+
                '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: coord,
                title: name
            });
            marker.setMap(map);
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        }
    }

This code put 4 markers, at the right place. But when I click on one of those markers, the "pop up window" appears near from the LAST marker that I have created. I would like to set information window for each marker.

I can't do something like :

var marker+i = new google.maps.Marker();

... But maybe there is tips for do some stuff like that ?

I hope it was clear ^^'

Thanks for helping, guys ! :-)

CORRECT CODE AFTER KhorneHoly answer ! Thanks to him.

function addMarker(markerData, map){
    var contentString = '<div id="content">'+
        '<form method="get" action="manual" id="form-new">'+
            '<button type="submit" id="new-button" name="'+markerData["guid"]+'" class="btn new-btn">Manual</button>'+
        '</form>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var LatLng = new google.maps.LatLng(markerData["latitude"], markerData["longitude"]);
    var marker = new google.maps.Marker({
        position: LatLng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
}

function readDevices(output){
    var arrayOfDevices = new Array();
    var markers = new Array();
    $.each(output.data, function(key, value){
        $.each(value, function(deviceKey, deviceValue){
            if(deviceKey == 'guid' && deviceValue >= 42421 && deviceValue <= 42424){
                arrayOfDevices.push(value);
            }
        });
    });

    for(var i = 0; i < arrayOfDevices.length; i++){
        var guid = arrayOfDevices[i]["guid"];
        var latitude = arrayOfDevices[i]["latitude"];
        var longitude = arrayOfDevices[i]["longitude"];
        var name = arrayOfDevices[i]["name"];
        var coord = new google.maps.LatLng(latitude, longitude);
        markers.push(addMarker(arrayOfDevices[i], map));
    }
}

Answer 1

What you want to do is not possible because you can't generate variables like this. But what you can do is to generate an array you fill with the markers in an for loop like this:

var markers = new Array();    
for (var i = 0; i < ArrayWithYourResultYouWantGenerateTheMarkersFrom.length; ++i) {
    markers.push(addMarker(ArrayWithYourResultYouWantGenerateTheMarkersFrom.[i], map));
}

public function addMarker(markerData, map){
    var LatLng = new google.maps.LatLng(markerData.lat, markerData.lon);
    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
}