jQuery UI + Gmaps = Problems (for me at least) HELP!!

Question

Hi there!

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

I've had this happen to me before. I haven't gone through your code yet, so I can't diagnose your problem, but for me the problem was the HTML/CSS of the map_canvas div (the one google maps uses to render the map) was being sized wrong. Most likley you have a div within a div and you need to set the inner div to width=100% and height=100%.

Answer 2

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;
}

Answer 3

I had the same problem with jquery tabs. But I decided not to use css fix, since it replaces original hidden display property of all tabs by moving them outside of the screen. I believe this can be treated as cheating by google or other search engines.

Anyway, I created very similar peace of code to what Chris B submitted above, with one addition, which is map.setCenter(). Because my map was not centered correctly after checkResize() method.

$('#tabs').bind('tabsshow', function(event, ui) {
    if( $('#map').is(':visible') ) {
        map.checkResize();
        map.setCenter(centerPoint, 14);
    }
});

Answer 4

HI, I have same problem to render the rich:map in modelpanel of rich faces. it does not render the map completely. but when i click on inspect element of model panel then it display ? any suggestion.

Thanks