Question

I have a sencha touch 1 app I’ve just upgraded to sencha touch 2, and I’ve got everything to work except the google map.

In ST1, I added this line to index.html:

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

Then I added this to a panel:

            {
                xtype: 'map',
                useCurrentLocation: false,
                fullscreen: false,
                layout: 'auto',
                id: 'jobmap',
                height: 400,
                mapOptions: {
                    zoom: 12,
                    navigationControl: true,
                    navigationControlOptions: 
                    {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                }                    
            }

In ST2, the docs say to still add the reference to index.html, though their forums also seem to say to use app.json. I’ve tried both using the above code and nothing appears on the panel. The controls before and after it appear adjacent to each other.

I’ve even just tried:

         {
                xtype: 'map',
                useCurrentLocation: true
            }

and I still get nothing.

Any ideas?

Answer 1

The panel which contains your map should be set layout: 'card'.

Also, it’s not necessary (or may cause errors) to set fullscreen: false or layout: 'auto', just remove them from your map config.

Hope it helps.