Google map insensitive for events in Sencha Touch 2

Question

I have a google map defined in Sencha touch 2. It's showing the map, but it's not responding on touch events. I can't move or pinch it.

Ext.define('AddressBook.view.contact.Show', {
    extend: 'Ext.Panel',
    xtype: 'contact-show',
    requires: [
        'Ext.Map'
    ],
    config: {
        title: 'Information',
        layout: 'card',
        items: [
            {
                xtype: 'map',
                mapOptions : {
                    zoom : 15,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                }
            }
        ]
    },

    centerMap: function(newRecord) {
        ...
    },

    setMarkers: function(markers) {
        ...
    }
});

I created it in app.js:

Ext.Loader.setConfig({ enabled: true });

Ext.application({
    ...

    launch: function() {
        Ext.Viewport.add({
            xclass: 'AddressBook.view.contact.Show'
        });
    }
});

I include the google script:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"</script>

The thing is that the "Map" example that Sencha is providing seems to work fine. But it's using Ext.setup() and Ext.create() to show the map in app.js. I can't figger out why it's working fine that way. But also I can't use that way of creating the map. Anyone knows what's the problem?

Olivier de Jonge · Accepted Answer · 2012-09-25T09:10:43.803

0

Found the problem. The 'map' example from Sencha that worked has a script included that does not exist in the sample, but exists in another sample I used as a template for my project.

<link rel="stylesheet" href="css/example.css" type="text/css"/>

BY THE SAKE OF THIS NON EXISTING SCRIPT INCLUDE GOOGLE MAPS IS WORKING IN EXAMPLE 'MAP'.

In other words if you include it in your project with Google maps, it will become irresponsive! I had to strip the 'map' example down to finally find the problem, cost me a lot of time, thanks to someone not cleaning his code before it becomes an example!

B.t.w. this is the reason that the 'navigationview' example also has a freezed Google Map because it needs this corrupting script to show it's styles.

I ask the Sencha Team to remove this confusing code from their examples.

edited Sep 25 '12 at 09:10

answered Sep 25 '12 at 08:49

Olivier de Jonge

1,454
2
15
31

The website of Sencha is full of flaws and errors. I worked myself with Sencha Architect for a project, and it seems even the tutorials on the site have errors, and needs constantly adjusting, however, they are more busy debugging the code itself than to look at the site itself. Anyway, good luck ;) – Dorvalla Sep 25 '12 at 08:55
This stylesheet example.css is needed to style e.g. the navigationview. It is full of errors! It seems somebody just dropped it in the example kit. – Olivier de Jonge Sep 25 '12 at 09:24
I am having a similar issue, but only on Android 4.2.2 with Sencha Touch 2.2. On iOS it works fine, I can interact with the map fully. I have no such CSS file being imported. – M Azam Jun 12 '13 at 20:18

Google map insensitive for events in Sencha Touch 2

1 Answers1