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

      0  

    Default Adding multiple infowindows for google maps marker

    Adding multiple infowindows for google maps marker


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

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

      0  

    Default


    Code:
    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
            });