Ext.Map within a Ext.Panel

I have a panel and want to place a map (Google maps) within it. Is this possible?

When I open my maps page directly it works fine but when I put it in a panel I only get a blank white page without a maps view.

My Panel class:

Code:

---

Ext.define("app.view.TodoMaps", {
    extend: 'Ext.Panel',
    requires: "app.view.GoogleMaps",
    alias: "widget.todomapscard",


    config: {
        styleHtmlContent: true,
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            ui: "light",
            title: 'Maps page',
            items: [
                {
                    xtype: "button",
                    ui: "back",
                    text: "back",
                    action: 'ButtonBackToHomeClicked'
                }]
        },
            {
                xtype: "googlemapscard"      <----------
            }
        ]
    }
});

---

My Map class:

Code:

---

Ext.define("app.view.GoogleMaps", {
    extend: 'Ext.Map',
    alias: "widget.googlemapscard",


    //geo: geo, //Ext.util.Geolocation object
    //useCurrentLocation: geo, //same var geo with geolocation object
    config: {
        mapOptions:{
            zoom: 15,
            disableDefaultUI: true,
            //--Available Map Options--//


            panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false
        }


    }
});

---

How can I achieve that the map is visible within a panel.

PS. the reason I need a panel is because I want to navigate back to the previous panel.

Thanks in advance.

Maybe your map is there, only it is not visible because it is too small... Have you tried adding something like { layout: 'fit' }?

Doesn't work either.

Code:

---

Ext.define("app.view.GoogleMaps", {
    extend: 'Ext.Map',
    alias: "widget.googlemapscard",
    config: {
        layout: 'fit',
        mapOptions:{
            zoom: 15,
            disableDefaultUI: true,
            panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false
        }


    }
});

---

I'm having it like this - and it works just fine (but in tab panel...):

Code:

---

Ext.define('ParkIt.view.Map', {
    extend: 'Ext.Panel',
    xtype: 'mapview',
    config: {
        title: 'Map',
        iconCls: 'maps',
        layout: 'fit',
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Map'
        }, {
            xtype: 'map',
            useCurrentLocation: false,
            mapOptions: {
                zoom: 15,
                minZoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
            }
        }]
        }
    }


});

---

I did something wrong but now it works. Thank you!