View Full Version : Problems with Google Maps APIĻand Tabpanel

17 Nov 2009, 9:40 AM

I have problems when use TabPanel and Google Maps API, I create two TabPanel, the center panel contains a maps of google, and the left panel I used control for manipulate the info into the google maps, but this panel has hide propierty, when open the site don't have any problems. the problems occurs when hidden the left panel, the center panel don't refresh and see gray zone where stay the left panel. somebody could tell me what I need for the center panel refresh when the left panel is hidden?

17 Nov 2009, 11:56 AM
Its hard to say, since you provided no code.

This example does what your describing, so take a look and see if you spot any differences...


17 Nov 2009, 12:15 PM
Please post in the correct forum and read http://extjs.com/learn/Ext_Forum_Help

18 Nov 2009, 8:48 AM
@MartinJmz - please read that link that tryanDLS provided, and post your code again.

18 Nov 2009, 1:31 PM
@MartinJmz - please read that link that tryanDLS provided, and post your code again.

Nowhere did I ask you to direct message me your code.

20 Nov 2009, 11:37 AM
I am not sure I posted this yesterday. Anyways, I am getting problem implementing not only Google Maps, but Virtual Earth.

Here are the behaviors:
The window shows the toolbars in the correct position, but when it comes time to pan or zoom, the images returned only requests an awkward div size.

Here is the slightly bad workaround:
In the case of Google Maps Panel, I have to move the portlet to another column, switch to another tab panel and switch back, and then the map will refresh with the entire panel.
In the case of a Virtual Earth Panel, I have to double click the map to zoom, and the map will refresh with the entire panel.

Here's my Virtual Earth Class.

Ext.ux.maps.VirtualEarthPanel = Ext.extend(Ext.Panel, {
cls: 'map',

initComponent: function () {
var defConfig = {
layout: 'fit',
border: true
Ext.applyIf(this, defConfig);

constructor: function(config) {
config = config || {};
Ext.apply(config, {

afterRender : function(){

var wh = this.ownerCt.getSize();
Ext.applyIf(this, wh);

this.map = new VEMap(this.body.dom['id']);
catch (e)

Ext.reg('virtualearthpanel', Ext.ux.maps.VirtualEarthPanel);

var mapConfig = {
title: 'Map',
xtype: 'panel',
animCollapse: false,
tools: tools,
layout: 'fit',
items: [{xtype: 'virtualearthpanel'}]

Put it into a portal, tabbed panel, window. You will get some problems, and I think it is div/css issue, that I am not quite sure how to fix.

I am also using layout: 'fit', but I am not sure this is correct.

20 Nov 2009, 11:54 AM
Not sure about Virtual Earth, but Maps requires that you let the map class know that it needs to re-size itself to fit in the container...


Also, is there a reason your nesting the map panel in another panel, instead of doing something like this...

var mapConfig = {
title: 'Map',
xtype: 'virtualearthpanel',
animCollapse: false,
tools: tools,
layout: 'fit',

20 Nov 2009, 12:32 PM
@VinylFox, I will check to see if need to implement the checkResize.

If I can find the reason why the tab panel is not displaying the title in this case, then I would implement it like this. Any suggestions as to why it is not working out. Also, in the case of portlets, is it not expecting a portlet instead of panel. So in a portlet I'm placing the map inside the items.

20 Nov 2009, 2:16 PM
Ok I put alerts all over onResize and setSize.

I am wondering why the checkResize is before the superclass call.

onResize : function(w, h){

if (typeof this.gmap == 'object') {
alert(w+", "+h);
Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);

And it calls onResize and setSize a dozen times:
setSize(304,371) -> onResize(304,371) -> setSize(304,371)
-> setSize(838,371) -> onResize(838,371) -> setSize(838,371)
-> onResize(838,371) -> setSize(838,371)

So I figured there must be a delay or wait to ignore subsequent requests to checkResize()

So I waited, and dismissed the alert field on one of the latter resizes, and sure enough it worked.

So I am trying to do a setInterval or setTimeout on this, but is there a Ext version to do this?!?.

I want to determine whether this.gmap.isLoaded() == true then perform checkResize.

20 Nov 2009, 3:15 PM
Maybe someone could tell me where this is better placed.

In GMapPanel.js

GEvent.bind(this.gmap, 'load', this, function(){

It's not pretty, but I figured that because the checkResize had to wait for the load, and Google Maps API needed to load first, that it had to wait for the load event before it could send the checkResize.

27 Nov 2009, 10:21 AM
You should update your version of the GMapPanel UX, the one your using is out of date.

Ext.ux.GMapPanel.js (http://code.google.com/p/ext-ux-gmappanel/source/browse/trunk/src/Ext.ux.GMapPanel.js)