Adding multiple infowindows for google maps marker

[Presecan]

Greeting all!

I am quite new in Sencha Touch, and Javascript, but it has been a great enjoy to wrok with Sencha Touch.
I got stuck on one problem... currently in funcition "maprender" i have added a markers, and i want to attach the info windows on each marker. This become quite big problem around the internet, and many solutions came across.

But non of this solutions I cannot (better said, i dont know how to) implement. So i need a little help, if you can help me.

So in "maprender" function made markers, and it works:

var blocks = [[45.817536, 16.163487, '\"Odeon\", bar'],
[45.484683, 16.373569, '\"Trattoria\" bar],
[45.806465, 15.964323, 'Bistro \"Super faks\"'],
[45.80216, 15.970159, 'Cassandra'],
[45.811998, 15.937251, 'Movie pub'],
[46.31045,16.321596, 'Restoran \"Electron\"']
];








for (var i = 0; i < blocks.length; i++) {
    var block = block[i];
    var m = new google.maps.LatLng(block[0], block[1]);
    new google.maps.Marker({
        position: m,
        map: gmap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        title: block[2]
    });
}

by looking this tutorial i tried to make my code look like this:

var blocks = [[45.817536, 16.163487, '\"Odeon\", bar'],
[45.484683, 16.373569, '\"Trattoria\" bar],
[45.806465, 15.964323, 'Bistro \"Super faks\"'],
[45.80216, 15.970159, 'Cassandra'],
[45.811998, 15.937251, 'Movie pub'],
[46.31045,16.321596, 'Restoran \"Electron\"']
];


var infowindow = null;
infowindow = new google.maps.InfoWindow({
    content: "holding..."
});


for (var i = 0; i < blocks.length; i++) {
    var block = block[i];
    var m = new google.maps.LatLng(block[0], block[1]);
    new google.maps.Marker({
        position: m,
        map: gmap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        title: block[2]
    });
    
    google.maps.event.addListener(m, 'click', function () {
        infowindow.setContent(this.title);
        infowindow.open(gmap, this);
    });
}

It didnt worked out, because Sencha Architect says the error is in the making fuction in the loop. (it means on "google.maps.event.addListener()" function)


Further more i tried another solution, calling my function addInfoWindow(), which will add listeners for each marker:

var blocks = [[45.817536, 16.163487, '\"Odeon\", bar'],
[45.484683, 16.373569, '\"Trattoria\" bar],
[45.806465, 15.964323, 'Bistro \"Super faks\"'],
[45.80216, 15.970159, 'Cassandra'],
[45.811998, 15.937251, 'Movie pub'],
[46.31045,16.321596, 'Restoran \"Electron\"']
];




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


for (var i = 0; i < blocks.length; i++) {
    var block = block[i];
    var m = new google.maps.LatLng(block[0], block[1]);
    new google.maps.Marker({
        position: m,
        map: gmap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        title: block[2]
        
    });
    //the arguments fo the functions are : marker, content, infowindow, map
    addInfoWindow(m, block[2], infowindow, gmap);
}

and the function is:

addInfoWindow(marker, content, infowindow, map){
    google.maps.event.addListener(m, 'click', function () {
        infowindow.setContent(content);
        infowindow.open(gmap, marker);
    });
}

can you pleas show me where i am doing it wrong, and what is the solution for this problem?
This answer will help me to better understand Javascript, Sencha Touch and how to work in Sencha Architect.

THANK YOU

[patrice.rafaheliarison]

var gMap = Ext.create('Ext.Map', {                id: 'map',
                mapOptions: {
                    zoom: 8,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    },
                    center: new google.maps.LatLng(50.600673,4.504395)
                },
                listeners: {
                    maprender: function(extMapComponent, map){
                        var infowindow = new google.maps.InfoWindow();
                        var coordonnes = new Array();
                        coordonnes.push({lat: 50.600673, lon: 4.504395, commune: 'Bruxelles'});
                        coordonnes.push({lat: 50.402719, lon: 4.516382, commune: 'Chatelet'});
                        for(var i = 0; i < coordonnes.length; i++){
                            var marker = new google.maps.Marker({
                                 position: new google.maps.LatLng(coordonnes[i].lat, coordonnes[i].lon),
                                 title : coordonnes[i].commune,
                                map: map
                            });
                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                   return function() {
                                     infowindow.setContent( '<a href="#">'+coordonnes[i].commune+'</a>'   );
                                     infowindow.open(map, marker);
                                   }
                             })(marker, i));
                            }//fin for
                    }//fin maprender
                }//fin listeners
        });