jquery ui dialog + Google Maps + IE8 error... What could it be?

Question

Hi! I'm trying to use jquery ui dialog and google maps... so when an user clicks a link, the dialog opens showing the map.

I've tried in many ways... it works on FF and Chrome but on IE8 the map is gray.

In one of the changes in script reference order in html head, makes the map loads just a part of it in IE8... tried to load google maps before and after dialog, but nothing changed

It's very confusing... Has anyone gone through this issue??

Thanks!

Answer 1

The jQuery UI documentation for tabs says this, and I think it applies to dialogs as well (you'll need to adjust the code for dialogs).

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

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

For Google maps you can also resize the map once the tab is displayed like this:

$('#example').bind('tabsshow',
  function(event, ui) {
  if (ui.panel.id == "map-tab") {
    resizeMap();
  }
});

resizeMap() will call Google Maps' checkResize() on the particular map.

Answer 2

Thank you AndreMiranda and Chris B for proposing this question w/ answer. I know this is an old post, but it worked perfect!