Chris Edwards
Chris Edwards

Reputation: 3612

How to use Google Map view using Sencha and PhoneGap

I'm having a problem getting Google Maps to display when compiled and run on device (iPhone in this case).

If I use it without the mapOptions I get the message "Google Maps API is required", if I include the mapOptions I simply get a blank screen where the map should be... It also seems to break the tab, it doesnt show as the active tab when launched (it should - its the first tab) and you cannot navigate back to the tab...

Can anyone tell me what I'm dong wrong please? I have included the maps api JS in my index file...

ToolbarDemo.views.Mapcard = Ext.extend(Ext.Panel, {
    title: "Map",
    id: 'map',

    dockedItems: [{
        xtype: "toolbar",
        title: "Current location"
    }],
    //styleHtmlContent: true,
    fullscreen: true,
    layout: 'fit',
    items: [
        {
            xtype: 'map',
            useCurrentLocation: true,
            layout: 'fit',
            id: 'cadwmap',
            mapOptions: {
                //center : new google.maps.LatLng(50.077721, 14.448585),
                zoom: 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
            }
        }
    ],

    initComponent: function() {
        ToolbarDemo.views.Mapcard.superclass.initComponent.apply(this, arguments);
    }
});

Ext.reg('mapcard', ToolbarDemo.views.Mapcard);

Upvotes: 1

Views: 1953

Answers (2)

SteveCav
SteveCav

Reputation: 6729

Make sure your index.html includes:

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

Upvotes: 1

Chris Edwards
Chris Edwards

Reputation: 3612

Ok I think the answer was that I had to add the domains related to google in the PhoneGap whitelist in the phonegap.plist file

Upvotes: 1

Related Questions