sencha touch app remains on blue loading screen when integrating google maps - google-maps

Question

I hope someone can explain this to me. I have built a sencha touch 2.2.1 app and converted it to a native android app.
I have a map view that extends Ext.Map as shown below. When I remove that view, the app loads successfully on my mobile. When I integrate the view again, the mobile app first displays a white screen, then it displays the default sencha theme blue screen and stays there. Not even the loading indicator appears.
When the apk was tested in the emulator, everything works fine.
I included this line in index.html before using the map. I included it in the HEAD section. However in the sencha examples provided, it is included in the BODY section. Does it make any difference?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Here are my files:
Controller:
Ext.define('EntityApp.controller.Map', {
extend : 'Ext.app.Controller',
requires : 'Ext.device.Connection',
config : {
refs : {
map : '.mappanel'
},
control : {
map: {
initialize: 'initMap'
}
}
},
initMap: function () {
var me = this;
var gMap = me.getMap();
gMap.on('maprender', this.onMapRender, this, {single : true});
},
onMapRender: function(e) {
if (Ext.device.Connection.isOnline()) {
var latLngCoordinates = new google.maps.LatLng(<value>, <value>);
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMap().getMap()
});
this.getMap().getMap().setMapTypeId(google.maps.MapTypeId.ROADMAP);
this.getMap().setMapCenter(latLngCoordinates);
this.getMap().getMap().setZoom(17);
}
}
});
View:
Ext.define('EntityApp.view.Map', {
extend: 'Ext.Map',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Location'
},
mapOptions: {
center: !(window.google || {}).maps ? null : new google.maps.LatLng(<value>, <value>),
zoom: 17
}
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});

Answer 1

Even I'm also getting same error, I just add
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
tag after
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
in my index.html. It works fine. Try this.

Answer 2

I managed to solve the above by overriding the Ext.Map with my own data.
I also assigned a custom xtype called mymap and now I just do xtype:'mymap' and a map component loads with my custom data, as shown below:
Ext.define('App.view.Map', {
extend: 'Ext.Panel',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: [
{ docked: 'top', xtype: 'titlebar', title: 'Location' },
{ xtype: 'mymap' }
]
}
});
It seems that sencha processes the views data before the script tags in index.html. Correct me if I am wrong...