Adding multiple infowindows for google maps marker

[Presecan]

Hhay!
I'm quite new to Sencha Touch, and it is great enjoy to work with it.
I have stocked in various different solutions of the problem, "how to add multiple infowindows", but non of them doesnt work in my case...
this is my code, and i want to add for each marker a infowindow with the data of the "blocks"

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 = blocks[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]
    });
}

can anyone please help me..
thank you

[mitchellsimoens]

block[0] is going to return an array. You have an array with arrays. You need to do something like block[0][0]

[Presecan]

oh yeah i changed it... i missed one s in block[i]. correct is blocks[i];

But i wonder why i cannot do something like this in my maprender function:

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 = blocks[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(block[2]);
        infowindow.open(gmap,m);
    });
}

... it sais that i should not put a funcion ("addListener") in the loop..
how to solve this problem?

... i have found some solutions on web how to solve it but non of it doesn really work in my case, in sencha touch

[mitchellsimoens]

The issue is because the block variable has changed. You can set the block on the marker and then on the click event callback you can get the block from the marker and that should be the correct info.

[Presecan]

how to do that... i tried to "save" marker in some array variable, and after set listener, but that didnt worked either...
i am not sure if i understood correctly what to you meen on event callback?

[mitchellsimoens]

When you create a marker via new google.maps.Marker({ then just set a config in there to the block[i] and now the data from the block is cached on the marker. Now when the click event fires you can get the block data from the config you created.

[hamza_zar]

I have the same problem like Presecan also I need to get this data that you use into blocks variable from json or xml (lat,lng,title) in server. Any idea ?.

[Presecan]

Thank you for your reply.
I dont know if I understood you corectly... is this on what you mean?

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

... but this still doesnt work...
Im sry, i am completly new in Javascript and Sencha...
... to me it seems that addListener function makes problem... i dont know where should i put that function, and how to code it

[digeridoopoo]

I've seen a great example for sencha touch 1 on Github...forget the name but it shows all the markers....word map example or something.

I'm going to be adapting it to Sencha Touch 2 soon, maybe we can help each other (I have successfully adapted it for my own needs for v1).

:-)