Ext.Map within a Ext.Panel

[stackflower]

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:

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:

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.

[ingo.hefti]

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

[stackflower]

Doesn't work either.

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
        }


    }
});

[ingo.hefti]

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

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
                }
            }
        }]
        }
    }


});

[stackflower]

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