1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    Presecan is on a distinguished road

      0  

    Default Unanswered: Adding multiple infowindows for google maps marker

    Unanswered: Adding multiple infowindows for google maps marker


    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"
    Code:
    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
    Last edited by Presecan; 9 May 2012 at 9:29 AM. Reason: added s on blocks[i];

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,047
    Answers
    3493
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    block[0] is going to return an array. You have an array with arrays. You need to do something like block[0][0]
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    Presecan is on a distinguished road

      0  

    Default


    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:
    Code:
    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,047
    Answers
    3493
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    Presecan is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,047
    Answers
    3493
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    hamza_zar is on a distinguished road

      0  

    Default


    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 ?.

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    Presecan is on a distinguished road

      0  

    Default


    Thank you for your reply.
    I dont know if I understood you corectly... is this on what you mean?
    Code:
    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

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Try github....

    Try github....


    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).

    :-)