Google map handling in sencha

Question

I have implemented the map functionality in my sencha based application. The map is showing but cant able to zoom in or zoom out & can't be able to move in other direction. It showa like static in the image.

But I want to show the map as like the following

Here is my code

  var mapapnel = Ext.create('Ext.Panel', {
                                      id: 'mapapnel',
                                      layout:'card',
                                      height: '100%',
                                      width: '100%',
                                         items: [
                                                 {
                                                 xtype: 'toolbar',
                                                 ui:'light',
                                                 docked: 'top',
                                                 title: 'Find location',
                                                 items: [{
                                                         text: 'Back',
                                                         ui: 'back',
                                                         handler: function() {
                                                         Ext.getCmp('homepnl').setActiveItem(1);
                                                         }
                                                         },{
                                                         xtype:'spacer'
                                                         }
                                                         ]
                                                 },
                                                 {
                                                 xtype:'map',
                                                 useCurrentLocation:false,
                                                 mapOptions: {
                                                 zoom: 15,
                                                 zoomControl : true,
                                                 center: new google.maps.LatLng(11.0183, 76.9725),
                                                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                                                 navigationControl: true,

                                                 navigationControlOptions: {
                                                 style: google.maps.NavigationControlStyle.DEFAULT
                                                 }
                                                 }
                                                 }

                                                 ]
                                         })

what change required in my code add the functionalites zoom in & zoom out.

Answer 1

Here my answer one more time:

It look likes a layout problem, the map should be inside a container with layout 'fit'.