Problems with Google Maps API v3 + jQuery UI Tabs

Note: this answer received an invalid 3rd party edit which essentially replaced its content, something that a 3rd party editor should not do. However, the result may be more useful than the original, so both versions are now given below:

• Original author Anon's version from 2010, after one edit by Anon

  google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() );

is suggested byhttp://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 as av3 substitute for v2's checkResize().

Blech - bad google, no cookie.

• User Eugeniusz Fizdejko's complete rewrite form 2012:

For me works when adding a marker:

var marker = new google.maps.Marker({    position: myLatlng,    title:"Hello World!"});google.maps.event.addListener(map, "idle", function(){    marker.setMap(map);});

Actually scratch my answer above. The jQueryUI website has the answer and here it is:

Why does...

...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

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.

Just redefine the css class for hidden tab:

.ui-tabs .ui-tabs-hide {    position: absolute !important;    left: -10000px !important;    display:block !important;}