Sencha Touch production builds breaks Ext.Map functionality

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?

score 0 · Answer 1 · answered Mar 20 '14 at 20:36

0

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

answered Mar 20 '14 at 20:36

Łukasz Szewczak

1,851
1
13
14

Scoup · Answer 2 · 2014-03-24T17:38:34.920

0

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

edited Mar 24 '14 at 17:38

answered Mar 20 '14 at 20:42

Scoup

1,323
8
11

But the problem occurs much later than the script loading as I have to click a few screens to get to the map view. In addition, this is a production build so surely all the script would be loaded in. – jaffa Mar 24 '14 at 16:47
Sorry, but I don't understand how your update would work. There is nothing in there that suggests using a callback or altering the order of loading the scripts. I've tried this with still no success. I don't even set the center of the map in my code. The problem is I can't debug the production code because it is minified. Have you any other suggestions? – jaffa Mar 27 '14 at 16:01
The diference is about the activate and maprender. The config of maps is inside the activate, so your javascript already loaded (activate is only called after all is loaded). And the map render the maps is already rendered (so you have sure there is a map). Both are callbacks. Is diferente of put your configs directly. – Scoup Mar 27 '14 at 17:06
Have you changed your first post? With the logs, where is breaking? – Scoup Mar 27 '14 at 17:15
Your centerMap cames from here: http://docs.sencha.com/touch/2.3.0/source/Map.html#Ext-Map-method-initMap Try use my activate change config to replace the default one. – Scoup Mar 27 '14 at 17:20

Sencha Touch production builds breaks Ext.Map functionality

2 Answers2