CODEWITHSUNDEEP
google-mapsextjscordovasencha-touch-2
Fazil
Fazil

Reputation: 1390

Google maps API required

When i try to show the map in my aplication its showing the messsage as "Google maps API required" in the view, Here my code 

   var mapapnel = Ext.create('Ext.Panel', {
                      id: 'mapapnel',
                      height: '100%',
                      width: '100%',
                      fullscreen: true,
                      layout:'fit',
                      layout:'vbox',
                      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:true
                                 }]});

What change required to show the map?please help me to solve

Upvotes: 1

Views: 495

Answers (2)

Viswa
Viswa

Reputation: 3211

Two things

1) The panel which contains map should be card layout.

2) Without setting center mapOptions, map not showing.

Give Lat & Lng value as you need.

var mapapnel = Ext.create('Ext.Panel', {
          id: 'mapapnel',
          layout:'card',
          items: [{
              xtype: 'toolbar',
              ui:'light',
              docked: 'top',
              title: 'Find location',
              items: [{
                  text: 'Back',
                  ui: 'back',
                  handler: function() {
                     Ext.getCmp('homepnl').setActiveItem(1);
                  }
              }
            ]},
            {
             xtype:'map',
             useCurrentLocation:true,
             mapOptions: {
              zoom: 12,
              zoomControl : true,
              center: new google.maps.LatLng(Lat, Lng),
              disableDefaultUI: true
           }]
});

Upvotes: 0

Rickert
Rickert

Reputation: 120

You need to load the google maps javascript api.

you can do this by adding the code in your index.html file.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

Upvotes: 2

Related Questions