Add map as child of TabPanel

[isaacueca]

Hi guys,I'm trying to add a google map as a child of TabPanel item.
However the map once it renders covers the entire screen, including the tabs
This is the code that I'm using to call the map inside the tabpanel item, once I select the specific item:

title: 'map',
id: 'tab3',
listeners: {
activate: function(cmp) {
new Ext.Panel({
fullscreen: true,
items: [mapdemo],
})
}
}

And this is the code I'm using to create the map:

var position = new google.maps.LatLng(37.44885,-122.158592);
var mapdemo = new Ext.Map({
mapOptions: {
center: position,
disableDefaultUI: true,
zoom: 5,
},
maskMap: true,
});

Any help would be much appreciated it!

[TommyMaintz]

It seems like you are creating a full screen panel on the activate event of the tab card. The items you pass to a TabPanel are the cards. So basically what you are trying to do is make the third tabcard a map. Thus try the following code.



title: 'Map',
id: 'tab3',
xtype: 'map',
mapOptions: {
center: new google.maps.LatLng(37.44885,-122.158592),
disableDefaultUI: true,
zoom: 5
}

[isaacueca]

Hey Tommy thank you so much for your quick answer. It worked like a charm!
I'm looking forward to sharing with all of you the project that I'm working on.
It's shaping up very quickly thanks to Sencha!
Again, many thanks for your help

[umenokin]

title: 'Map',
id: 'tab3',
xtype: 'map',
mapOptions: {
center: new google.maps.LatLng(37.44885,-122.158592),
disableDefaultUI: true,
zoom: 5
}Hi!
How I can set marker in this style?