Question

I can’t put any marker on my google map using sencha touch. This code works correctly:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        var position = new google.maps.LatLng(36.830618975720746,10.1987886428833);
        var position2 = new google.maps.LatLng(33.7580276912933,10.848312377929688);
        var map = new Ext.Map({
            mapOptions: {
                center: position
            },
            listeners: {
                delay: 500,
                afterrender: function(){
                    var marker = new google.maps.Marker({
                        position: position,
                        title: 'helooooooo',
                        map: map.map
                    });
                    var marker2 = new google.maps.Marker({
                        position: position2,
                        title: 'helooooooo',   
                        map: map.map
                    }); 
                }
            }
        });
        var icons = new Ext.TabPanel({
            fullscreen: true,
            items: [{
                iconCls: 'bookmarks',
                title: 'page principale',
                cls: 'card card3',
                html: 'Blaaaaaaaa'
            }, {
                iconCls: 'search',
                title: 'MapTunis',
                cls: '',
                layout: 'fit',
                items: map
            }],
            tabBar: {
                scroll: {
                    direction: 'horizontal',
                    scrollbars: false
                },
                layout: {
                    pack: 'center'
                }
            },
        });
    }
});

I tried this code on its own and it worked fine. But when i tried it with an xtype:Map it wouldnt work no matter what I try.

App.views.Homegeoatm = Ext.extend(Ext.Panel, {
    items: [{
        xtype: 'map',
        id: 'map',
        useCurrentLocation: true,
        fullscreen: true,
        markerDesc: "salam",
        markerPos: new google.maps.LatLng (36.830618975720746,10.1987886428833),
        mapOptions: {
            zoom: 8 
        },
        listeners: {
            delay: 500,
            afterrender: function(){
                var marker = new google.maps.Marker({
                    position: position = new google.maps.LatLng (36.830618975720746,10.1987886428833),
                    map: App.views.Homegeoatm.getComponent('map').map,
                });
            }
        }
    }]
});
Ext.reg('Homegeoatm', App.views.Homegeoatm);

Answer 1

You need to add the marker on “maprender” event (instead of “afterrender”) of the map. Try this one:

listeners: {
    maprender: function(extMapComponent, googleMapComp){
       var marker = new google.maps.Marker({
       position: new google.maps.LatLng (36.830618975720746,10.1987886428833),
       map: googleMapComp,
    });
}

This should work (not tested).