google-maps - sencha での Google マップの取り扱い

Question

sencha ベースのアプリケーションにマップ機能を実装しました。地図は表示されていますが、ズームインまたはズームアウトできず、他の方向に移動できません。画像では静電気のように見えます。

しかし、次のようにマップを表示したい

これが私のコードです

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

                                                 ]
                                         })

私のコードで必要な変更は、ズームインとズームアウトの機能を追加することです。

Answer 1

ここで私の答えをもう一度：

レイアウトの問題のように見えます。マップはレイアウト「フィット」のコンテナ内にある必要があります。