Question

I started using jQuery as soon as I found out about it, it is very powerfull but I started struggling when I tried to load Gmaps api into the tabs jQuery UI brings.
Strangly enough in IE 6,7,8 it works fine, but in Firefox, Safari (I’m using mac but tested it in windows and they both give the same problems) the map doesn’t load entirely.
When I click on the tab where the map loads in, only part of the map is fully operational, the rest is grey and not clickable.
Please take a look at the link below and click the third tab in firefox/safari and IE and you will see the problem.

http://movewithusoverseas.com/index-new.php?z=product-info.html&pid=1

I don’t know if it is a bug in the jQuery UI code or I’m doing something wrong.
If I load the map out of the tabs the map is shown OK.

I’m fighting with this problem for a week and a half… any help will be much appreciated.

Thanks in advance.
Luis

Answer 1

When the user opens the third tab, you need to call map.checkResize().

The problem is this: when you initialize the map, the third tab isn’t visible, and the map is sized incorrectly. Try adjusting the size of your browser window (this calls checkResize) and you’ll notice that the map corrects itself.

The jQuery UI documentation shows how you can bind an event to the opening of a tab. This should work for your page:

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tabs-3") {
        map.checkResize();
    }
});

Update: Luis points out that you can also solve this problem with the off-left technique:

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}