Maps set to fullscreen: true display over all panels

[Rohall]

Hi!
Ok ok, so I've posting a lot about maps...sorry about the mess and thanks again for all of the help. I've noticed that when I created a new map like this:



// Map Object/Settings
this.directionsMap = new Ext.Map({
fullscreen: true,
centered: true,

mapOptions: {
center: new
google.maps.LatLng(this.practiceLocation.latitude,this.practiceLocation.longitude), zoom:11
}
});


this.panelMap = new Ext.Panel({
id: 'panelMap',
layout: {
type: 'fit'
},
items: [this.directionsMap],
});


the map will appear above all other panels, but any markers I create will be displayed. If I remove the fullscreen: true configuration option then the map will behave correctly except it will not render any markers. Furthermore, if I set the panelMap fullscreen option to true while the map's fullscreen option is set to true I get an odd glitch which appears to be a map overlaying another map (the markers will appear in this as well). The panelMap object is being contained by another basic panel which has fullscreen: true and a layout of type 'card'.

Has anyone had similar issues? Is this a bug or am I missing something?

Thanks again!

[evant]

You can't have more than 1 fullscreen item.

A fit layout fits the child to the size of the parent. Make the container fullscreen, not the child.

[Rohall]

Thanks for your super fast replies Evant!

I did what you said, that resolves the issue of the map displaying over all other content, however when i remove the fullscreen: true options from the map the markers disappear...Does the fullscreen configuration option have any side effects that might be causing the rendering of the markers to occur?

[evant]

Not as far as I'm aware.

Can you post your new code?

[Rohall]

Sure!

Object Setup:


// Map Object/Settings
this.directionsMap = new Ext.Map({
layout: {type: 'fit'}, // I have tried removing this as well
//fullscreen: true,
centered: true,

mapOptions: { center: new google.maps.LatLng(this.practiceLocation.latitude,this.practiceLocation.longitude), zoom:11 }
});



this.panelMap = new Ext.Panel({
id: 'panelMap',
layout: {
type: 'fit'
},
items: [this.directionsMap],
});



Parent Panel and Marker:


this.ui = new Ext.Panel({
title: "A2 Store UI",
layout: 'card',
fullscreen: true
});
var marker = new google.maps.Marker({
map: this.directionsMap.map,
position: new google.maps.LatLng(this.practiceLocation.latitude,this.practiceLocation.longitude)
});

// This seems to have no effect (Someone suggested it in another thread)
marker.setMap(this.directionsMap.map);



Thanks again!

[evant]

In that case, shouldn't panelMap be fullscreen?

[Rohall]

Yep, that would make sense, but when I do that I get the strangest error! Take a look, it appears as though there's a map overlaying another map. In my web browser, if I resize the image the overlaying map will take control of 90% of the screen, leaving only a small border of the map underneath. On the iphone, the maps stay as they're displayed in the attached image (although as you move around the glitching does get a bit worse).

[Rohall]

Switching tabs appears to completely fix the map, eg:

Load webapp -> Click "Map" -> Panel loads with grey background / glitching -> switch tabs -> switch back to the webapp's tab -> map is displayed perfectly (albeit, slightly off of the actual center location, but still much better).

Is it possible I need to somehow force the panel to redraw once it has become active?