Problem with GWT TabPanel and Google Maps

Question

Hi everybody.

Working with Google Web Toolkit (with Google Maps Extension) I got a little problem:

I want to insert a Google Map into a TabLayoutPanel. Without that TabLayoutPanel everything worked fine. But as soon as the Map is inside of a tab it behaves really strange (its not centered right, and "jumps" when you try to scroll.).

The same Problem is when using TabPanel instead of TabLayoutPanel.

extract from my code:

in the onModuleLoad - method of my EntryPoint class:

    DockLayoutPanel mainPanel;
    MainUITabs tabWidget = new MainUITabs();
    mainPanel.add(tabWidget);
    RootLayoutPanel.get().add(mainPanel);

the MainUITabsWiget looks about like that:

public class MainUITabs extends Composite {

public MainUITabs(){
    TabLayoutPanel tabPanel = new TabLayoutPanel(10, Unit.PCT);

    MapWidget googleMapsTab = buildMapWidget();

    tabPanel.add(googleMapsTab, "Google Maps");

    initWidget(tabPanel);
}

private MapWidget buildMapWidget() {

    LatLng coord = LatLng.newInstance(51.509, 11.434);
    final MapWidget map = new MapWidget(coord, 2);
    map.setSize("600px", "300px");
    map.setCenter(coord);

    map.addControl(new LargeMapControl());  

    map.addOverlay(new Marker(coord));

    return map;
}

}

Seems like the Map doesn't like to be inside a tab..does anyone have an idea where the problem could be?

Thanks.

Andy

Answer 1

At first glance this looks like a problem I had with integrating TinyMCE (a WYSIWYG editor) with GWT - generally, components like these don't like when the DOM changes - in this case, it happens when you switch tabs (in my case it was drag & drop).
IIRC, the solution was to remove the TinyMCE widget from the text field it wrapped around when it wasn't shown on the screen. In your case, you'd want to remove the MapWidget from tabPanel, while it's not shown. I'm not familiar enough with the Google Maps API to know if there's a designated method to do that, but you can try a simple tabPanel.remove(googleMapsTab);.

Answer 2

The TabPanel docs say that "This widget will only work in quirks mode. If your application is in Standards Mode, use TabLayoutPanel instead."

So, if your page has a DOCTYPE and thus is in Standards Mode, that suggests you'll have problems.

I found that when using a TabPanel in Standards Mode, widgets on tabs after the first one (which aren't visible at first) don't always render correctly. A workaround was to render these elements when the tab is shown, by using SelectionHandler.onSelection, as noted in the docs for the deprecated method TabPanel#onTabSelected. But reading the bit I quoted above, that's probably asking for trouble and in Standards Mode you ought to use TabLayoutPanel instead.