Google map object is null!

[tolbahady]

console.log(myMap.map) gives null, but
console.log(myMap) gies an object with a map attribute which is the google map....

Band.views.SettingsLocation = Ext.extend(Ext.Panel,{
	dockedItems:[{
		xtype:'toolbar',
		title:'Location',
		items:[{
			text:'Cancel',
			xtype:'button',
			ui:'back',
			handler:function(){
				Ext.dispatch({
					controller:'settings',
					action:'index'
				});
			}
		},{xtype:'spacer'},{
			text:'Done',
			xtype:'button',
			ui:'confirm'
		}]
	}],
	layout:'fit',
	initComponent: function() {
	    this.position = new google.maps.LatLng(lat,lng);
	
	  	var myMap = new Ext.Map({
            mapOptions : {
                enter : this.position,  //nearby San Fran
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
			}
        });

		this.marker = new google.maps.Marker({
				map:myMap.map,
				title:'Currrent Location',
			    draggable:true,
			    animation: google.maps.Animation.DROP,
			    position: this.position
		});
		
		console.log(myMap.map);
		console.log(myMap);
		
		this.items = [myMap];
		
	    Band.views.SettingsLocation.superclass.initComponent.apply(this, arguments);
	},
});
Ext.reg('settings-location', Band.views.SettingsLocation);

[Jacky Nguyen]

Ext.Map#map is not guaranteed to be readily accessible at instantiation time since the rendering operation is synchronous. You should create a listener for the 'maprender' event and put your logics in there instead (create markers, etc.), i.e:

var myMap = new Ext.Map({
    mapOptions : {
        ...
    },
    listeners: {
        maprender: function() {
             // this.map is ready here
        },
        scope: this
    },
});

[tolbahady]

I got it working already, Thank you very much