Reputation: 3612
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
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
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