Google maps API required - google-maps

Question

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

Answer 1

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>

Answer 2

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