Google map insensitive for events in Sencha Touch 2

[odejonge]

I have a google map defined in Sencha touch 2. It's showing the map, but it's not responding on touch events, it's freezed. I can't move or zoom it although the controls are present.

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 in index.html:

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

The thing is that the "Map" example that you are 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?

[jerome76]

You can try

var mapPanel = Ext.create('AddressBook.view.contact.Show', {
    itemId: 'mapPanel'
});
Ext.Viewport.add(mapPanel);

[odejonge]

How do I apply the name "AddressBook" in this case to the app? It can't find AddressBook.view.contact.Show because it's not replace it with app/ in the path.
In the other case you do:
Ext.application({
name:"AddressBook",
...

[odejonge]

You can try

var mapPanel = Ext.create('AddressBook.view.contact.Show', {
    itemId: 'mapPanel'
});
Ext.Viewport.add(mapPanel);

Looks like this solution is not possible, since the documentation sais Ext.application(..) is required using MVC in Sencha Touch. So if you have a package structure you can't use Ext.create(..) in the root app.js file.

[odejonge]

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 other words if you include it in your project with Google maps, it will become irresponsive!<br>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!

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

[odejonge]

The example 'navigationview' needs the example.css for it's style. It seems to corrupt Google Maps because in this example the map is freezed too! I looked into it and it contains 3 errors, 490 warnings and 22 weak warnings. But it's too big for me to find out which style corrupts the google map.