Trouble with Google Maps when switching between jQueryUI tabs

Trouble with Google Maps when switching between jQueryUI tabs

Here's a page with the issue

To reproduce the error, using IE (I'm using IE 8) - click the directions tab, then any of the other tabs.

What I'm trying to do is this:

On page load, do nothing really. However, when the directions tab loads - setup the Google map. Like so:



   
    
    
  1. $('#tabs').bind('tabsshow', function(event, ui) {
    2. 
    
  2.     if (ui.panel.id == "tabs-5") {
    3. 
    
  3.         // get ma
    4. 
    
  4.         var dirMa= new GMap2($("div#dirMap").get(0));
    5. 
    
  5.         dirMap.setCenter(new GLatLng(35.79648921414565,139.40663874149323), 12);
    6. 
    
  6.         dirMap.enableScrollWheelZoom();
    7. 
    
  7.         dirMap.addControl(new PanoMapTypeControl());
    8. 
    
  8.         geocoder = new GClientGeocoder();
    9. 
    
  9.         $("#dirMap").resizable({
    10. 
    
  10.            stop: function() { dirMap.checkResize(); }
    11. 
    
  11.         });
    12. 
    
  12.         // clear dirText
    13. 
    
  13.         $("div#dirMapText").html("");
    14. 
    
  14.         dirMap.clearOverlays();
    15. 
    
  15.         var polygon = new GPolygon([new GLatLng(35.724496338474104,139.3444061279297),new GLatLng(35.74748750802863,139.3363380432129),new GLatLng(35.75765724051559,139.34303283691406),new GLatLng(35.76545779822543,139.3418312072754),new GLatLng(35.767547103447725,139.3476676940918),new GLatLng(35.75835374997911,139.34955596923828),new GLatLng(35.755149755962755,139.3567657470703),new GLatLng(35.74679090345495,139.35796737670898),new GLatLng(35.74762682821177,139.36294555664062),new GLatLng(35.744422402303826,139.36346054077148),new GLatLng(35.74860206266584,139.36946868896484),new GLatLng(35.735644401200986,139.36843872070312),new GLatLng(35.73843117306677,139.36174392700195),new GLatLng(35.73592308277646,139.3531608581543),new GLatLng(35.72686543236113,139.35298919677734),new GLatLng(35.724496338474104,139.3444061279297)], "#f33f00", 5, 1, "#ff0000", 0.2);dirMap.addOverlay(polygon);
    16. 
    
  16.         // load directions
    17. 
    
  17.         directions = new GDirections(dirMap, $("div#dirMapText").get(0));
    18. 
    
  18.         directions.load("from: Yokota@35.74005964772476,139.37083393335342 to: Ruby International@35.79648921414565,139.40663874149323");
    19. 
    
  19.     }
    20. 
    
  20. });
    21. 
   

What the heck is causing the error?
 The IE javascript debugger claims the 
error lies in main.js, line 139 character 28. (the Google maps api file). 
Which is this line:

       
    
        
  1. function zf(a,b){a=a.style;a.width=b.getWidthString();a.height=b.getHeightString()}
    2. 
       


Everything seems to work fine in Firefox (though it could just be suppressing 
the error). And, even though IE throws the error, the map still works.

It almost seems like there is no cleanup when a tab is "deselected". In that 
event, judging by my code, what do you believe I need to do to resolve my 
issue?

Any help is greatly appreciated! Thanks in advance!