Usare valore variabile come indice di un array

[Anth0ny92]

Salve ragazzi, spero di non aver usato un titolo troppo vago, io ho un problema che mi sta facendo impazzire e non riesco proprio a venirne a capo.

Ho trovato in giro un codice per creare dei marker persnalizzati sulla mappa di google e l'ho un po' modificato a mio favore, il blocco incriminato è il seguente:

function get_position(position)
     {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
     
        var miaPosizione = new google.maps.LatLng(latitude,longitude);
     
        var settings = {
        zoom: 15,
        center: miaPosizione,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP};
     
        map = new google.maps.Map(document.getElementById("map-canvas", get_error), settings);

        if(noPosition == false) {
            marker = new google.maps.Marker({
                 position: miaPosizione,
                 map: map,
                 title: "La tua posizione"
              });
        }


        $.post('{{URL::action('NegozioController@postAjaxJsonNegozi')}}', {}, function(data){
             
            arr = JSON.parse(data);

            var markers = [];
            var box = [];
            var info = [];
            
            var a = 0;
            for(i=0; i<arr.length; i++) {
                box[i] = "<div id='box-"+i+"'><p><b>"+arr[i].nome+"</b></p><p><b></b>"+arr[i].descrizione+"</p></div>";

                
                info[i] = new google.maps.InfoWindow({
                    content: box[i]
                });
            
                markers[i] = new ImageMarker({
                     map: map,
                     position: new google.maps.LatLng(arr[i].lat, arr[i].lng),
                     image: '',
                     events: {
                         click: function( event,a ) {
                           
                             info[i].open(map, markers[i]);
                            
                         }
                     }
                 });
            }
            
            
        }); 
        
     }

Il problema si trova nell'ultimo for, più precisamente qui:

markers[i] = new ImageMarker({
                     map: map,
                     position: new google.maps.LatLng(arr[i].lat, arr[i].lng),
                     image: '',
                     events: {
                         click: function( event,a ) {
                      //       alert( 'Clicked marker' );
                                
                                
                             info[i].open(map, markers[i]);
                            
                                
                         }
                     }
                 });

Il problema che riscontro è che quando clicco sul marker mi dice che l'oggetto info[i] non è definito, dato che lui non considera info[0], info[1], ecc per tutti quelli creati, ma info[i] con i uguale al valore attuale dopo che il ciclo si è concluso, quindi il numero complessivo di oggetti info + 1

Mentre se lo sostituisco ad esempio con info[0].open(map, markers[0]); quando clicco sul primo marker funziona perfettamente, quindi sono certoche il problema sia quello.

Spero che riusciate ad aiutarmi perchè si trtta di uan cosa importante e ci sto sbattendo da un pomeriggio sano la testa.

Ringrazio anticipatamente.
Un saluto a tutti

[SimoX90]

Credo di aver capito quello che vuoi dire, ed è un comportamento corretto, sebbene "scomodo" nel tuo caso...

Il fatto è che tu con events definisci cosa deve fare il codice una volta cliccato, e questo fa esattamente ciò che gli dici, ovvero andare a leggere la variabile i (che è uguale all'ultimo valore nel for) ecc. poiché essa viene letta per referenza.
Prova così:

click: function(a) {return function() {info[a].open(map, markers[a]);}}(i);

dovrebbe funzionare, ma vista l'ora non ne sono certo!

[Anth0ny92]

SimoX90 nonostante l'ora sei stato un grande! Hai risolto perfettamente il problema, io sapevo si dovesse fare qualcosa del genere con le funzioni, ma il js non lo conosco a fondo e quindi sapevo cosa ma avevo idea di come.

Ti ringrazio enormemente mi hai salvato!

[SimoX90]

Figurati!
Qualcuno più esperto di me, può commentare questa sintassi?
click:function(a){return function(){info[a].open(map, markers[a]);}}(i);
In particolare non mi è chiara la relazione tra la variabile a (che non è mai stata dichiarata) e il pezzo finale, ovvero: }(i)

Chi ne sa di più può spiegarmelo?

[Xinod]

e' una closure, leggi per esempio qui
http://jondavidjohn.com/blog/2011/09...d-using-events
diventa abbastanza esaustivo quando parla di "A simplified closure"

"i" viene tenuto in scope (in quanto valore passato come parametro "a") nella funzione anonima interna,
proprio per evitare il problema inizialmente riportato, dove "i" e' sempre l' ultimo valore assegnato

ciao

[SimoX90]

Veramente interessante l'uso delle closure! Non ne sapevo ancora troppo!

Qui un articolo interessante (cita un caso molto simile a quello di anth0ny)!
http://stacktrace.it/2007/12/22/javascript-closures/