Sencha Touch production builds breaks Ext.Map functionality - sencha-touch

Question

I am having problems with ST2.3. I've upgraded from 2.1 and I've had several regressions which are now working ok. However one problem that definitely seems to be broken is the Map wrapper around the google api. My app works fine in Testing and Development modes, but as soon as it is built for production the map stops working.
The code where it seems to break on is here within the Map code on the setMapCenter function.
setMapCenter:function(e){var b=this,d=b.getMap(),a=b.getMapOptions(),c=(window.google||{}).maps;if(c){if(!e){if(d&&d.getCenter){e=d.getCenter()}else{if(a.hasOwnProperty("center")){e=a.center}else{e=new c.LatLng(37.381592,-122.135672)}}}
The breakpoint seems to be on the line: new c.LatLng(37.381592,-122.135672).
Why would it suddenly start failing on a production build?
Update
This is the stack trace, but I can't find out what actually is the problem as the code is obfuscated/minified:
Uncaught TypeError: undefined is not a function VM1471:1
Ext.define.setMapCenterVM1471:1
Ext.define.updateUseCurrentLocationVM1471:1
jVM1471:1
b.implement.initConfigVM1471:1
etc...
The weird thing is, this worked using ST2.1. It also works in ST2.3 but only in Testing/Debug mode.
My code doesn't even set the center of the map when the view is initially shown:
This is the map view:
Ext.define('MyApp.view.offices.OfficeMap', {
extend: 'Ext.Panel',
alias: 'widget.officemapview',
requires: [
'Ext.Map'
],
config: {
layout: 'fit',
items: [
{
xtype: 'map',
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
console.log("activate fired");
},
maprender: function () {
console.log("maprender fired");
var gMap = this.getMap();
this.fireEvent('googleMapRender', gMap);
}
}
}
],
officeRecord: null
}
});
This is the controller code that receives the render event from the view:
onGoogleMapRender: function (googleMap) {
var record = this.selectedOffice;
var longi = record.get("Longitude");
var lati = record.get("Latitude");
console.log("About to create google maps pos")
console.log("About to create google maps marker")
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lati, longi)
});
console.log("About to set maps map object")
marker.setMap(googleMap);
setTimeout(function () {
console.log("map setTimeout")
// weird timeout issue? - http://stackoverflow.com/questions/15041697/sencha-touch-google-map-and-centering-a-marker
googleMap.setZoom(17);
googleMap.panTo(pos);
}, 500);
The error on the following browsers are:
Chrome - Uncaught TypeError: undefined is not a function
IE - Object does not support this function
Any ideas as to what is happening here?

Answer 1

Maybe check in chrome in developer tools on network tab what are the difference in loading javascript files between production mode and development mode.

Answer 2

That is because your javascript are loaded before the google maps javascript is loaded. So when setMapCenter get the function, there is no c yet (undefined). What you can do is use some callback, like "painted" and then set your "setMapCenter".
Update
Try to do this just to test:
xtype: "map",
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
me.config.mapOptions = {
center : new google.maps.LatLng(-42,-42), // your center
zoom : 14,
//others options
}
},
maprender: function(comp, map) {
var me = this;
var map = this.getMap();
// marker test
var position = new google.maps.LatLng(-42, -42);
var marker = new google.maps.Marker({
position: position,
title : 'Hello World',
map: map
});
}
}