Problems with Google Maps API¨and Tabpanel

[MartinJmz]

Hi

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?

[VinylFox]

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...

http://code.google.com/p/ext-ux-gmap...les/fullscreen

[tryanDLS]

Please post in the correct forum and read http://extjs.com/learn/Ext_Forum_Help

[VinylFox]

@MartinJmz - please read that link that tryanDLS provided, and post your code again.

[VinylFox]

@MartinJmz - please read that link that tryanDLS provided, and post your code again.

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

[CrazyEnigma]

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.namespace("Ext.ux.maps");
Ext.ux.maps.VirtualEarthPanel = Ext.extend(Ext.Panel, {
    cls: 'map',
    
    initComponent: function () {
        var defConfig = {
            layout: 'fit',
            border: true
        };
        Ext.applyIf(this, defConfig);
        Ext.ux.maps.VirtualEarthPanel.superclass.initComponent.call(this);
        this.addEvents('maploaded');
    },
    
    constructor: function(config) {
        config = config || {};
        Ext.apply(config, {
        });
        Ext.ux.maps.VirtualEarthPanel.superclass.constructor.call(this);
    },
    
    afterRender : function(){
        
        var wh = this.ownerCt.getSize();
        Ext.applyIf(this, wh);
        
        Ext.ux.maps.VirtualEarthPanel.superclass.afterRender.call(this);
        try{
            this.map = new VEMap(this.body.dom['id']);
            this.map.LoadMap();            
        }
        catch (e)
        {
            Ext.Msg(e.message);
        }
    }
    
});
Ext.reg('virtualearthpanel', Ext.ux.maps.VirtualEarthPanel);

var mapConfig = {
            title: 'Map',
            xtype: 'panel',
            animCollapse: false,
            tools: tools,
            layout: 'fit',
            height:400,
            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.

[VinylFox]

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...

your_map.checkResize();

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',
            height:400
}

[CrazyEnigma]

@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.

[CrazyEnigma]

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);
                this.gmap.checkResize();
        }
        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.

[CrazyEnigma]

Maybe someone could tell me where this is better placed.

In GMapPanel.js

        GEvent.bind(this.gmap, 'load', this, function(){
            this.onMapReady();
            this.gmap.checkResize();                
        });

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.