PDA

View Full Version : Ext.Map not showing up on iPad



bweiler
11 Jan 2012, 12:14 PM
The map displays fine on Safari desktop, but will not display on the iPad. I searched the forum and didn't see any posts regarding this problem. Is this a known issue or is the example in the docs incorrect?



Ext.define('MyApp.view.Map', {
extend: 'Ext.Map',

config: {
mapOptions: {
disableDefaultUI: true,
zoomControl: true,
zoom: 10
},
useCurrentLocation: true,
}
});


I also tried different layouts and none made any difference.

Thanks,

Bruce

mitchellsimoens
11 Jan 2012, 12:35 PM
This is loading on my iPad just fine:


Ext.define('MyApp.view.Map', {
extend: 'Ext.Map',

config: {
mapOptions: {
disableDefaultUI: true,
zoomControl: true,
zoom: 10
},
useCurrentLocation: true
}
});

Ext.setup({
onReady : function() {

Ext.create('MyApp.view.Map', {
fullscreen : true
});

}
});

bweiler
11 Jan 2012, 1:04 PM
In my case I'm trying to show the map inside a tab panel. Would you mind trying that on your iPad and seeing if it works?

I doubt this makes a difference, but the tab panel is in a simple Main.js container which is in the Ext.Viewport.

mitchellsimoens
11 Jan 2012, 1:06 PM
is the Map a child of the tab panel or is the map within a panel who is a child of the tab panel?

bweiler
11 Jan 2012, 1:36 PM
The map is a separate view that is added to the tab panel.

Tab panel code:


Ext.define('MyApp.view.Detail', {
extend: 'Ext.TabPanel',

config: {
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
},
},
items: [],
}
});


Mapview code:


Ext.define('MyApp.view.Map', {
extend: 'Ext.Map',

config: {
//layout: 'card',
mapOptions: {
disableDefaultUI: true,
zoomControl: true,
zoom: 10
},
useCurrentLocation: true,
}
});

mitchellsimoens
11 Jan 2012, 1:38 PM
Ok... but is the map wrapped in a panel?

bweiler
11 Jan 2012, 1:44 PM
Actually no. I just added the Ext.Map object directly to the tab panel. Is that why my code doesn't work?

mitchellsimoens
11 Jan 2012, 1:45 PM
hmmm... will test it and see what I see

bweiler
13 Jan 2012, 11:38 AM
I tried embedding the map in a panel and it still won't display on an iPad. Any suggestions?

Thanks,

Bruce

boris.barcelli
6 Mar 2012, 8:23 PM
Same problem here, works fine as a webapp in chrome and safari in my iPad, but doesn't show the map when compiled as a native app.



var lat = record.get('Latitude');
var long = record.get('Longitude');
var map = Ext.create('Ext.Map',
{
height:500,
mapOptions:
{
center: new google.maps.LatLng(lat, long),
zoom: 12,
minZoom: 9,
streetViewControl: false,
zoomControl: false,
overviewMapControl: false,
mapTypeControl: false
},
listeners:
{
'maprender' : function(comp, map)
{
var storeLocationMarker = new google.maps.MarkerImage('resources/images/marker-red.png',
new google.maps.Size(16, 26),
new google.maps.Point(0,0),
new google.maps.Point(8, 26));
var markerShadow = new google.maps.MarkerImage('resources/images/marker-shadow.png',
new google.maps.Size(25, 15),
new google.maps.Point(0,0),
new google.maps.Point(5, 15));


new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
shadow: markerShadow,
icon: storeLocationMarker,
title: record.get('title')
});


}
}
});


And then I add my map to my panel:

Do we need maybe to call an explicit init method on the GoogleMap API ?


var inPanel = Ext.create('Ext.Panel',
{
html:content,
height:700,
scrollable: {
direction: 'vertical',
directionLock: true
}
});
inPanel.add(map);