Hi,

how can I add a Map in a Tab Panel?

Here is my code:

Code:
Ext.create("Ext.tab.Panel", {
    fullscreen: true,
    tabBarPosition: 'bottom',
    items: [
        {
            title: 'Home',
            iconCls: 'home',
            cls: 'home',
            scrollable: true,
            html: [
                '<center><br>Welcome!</center>'
            ].join("")
        },
        {
            title: 'Map',
            iconCls: 'maps',
            scrollable: true,
            html: [
                '<center><br>Map here...<br></center>'
            ].join("")
        },
        {
            xtype: 'nestedlist',
            title: 'Steps',
            iconCls: 'star',
            displayField: 'title',
            store: {
                type: 'tree',
                fields: [
                    'title', 'content',
                    {name: 'leaf', defaultValue: true}
                ],
                root: {
                    leaf: false
                },
                proxy: {
                    type: 'ajax',
                    url: 'steps.json',
                    reader: {
                        type: 'json',
                        rootProperty: 'steps'
                    }
                }
            },
            detailCard: {
                xtype: 'panel',
                scrollable: true,
                styleHtmlContent: true
            },
            listeners: {
                itemtap: function(nestedList, list, index, element, post) {
                    this.getDetailCard().setHtml(post.get('content'));
                }
            }
        }
    ]
});
I need to insert a Map with markers in the second tab of my Panel.

Thanks in advance!