title: Problems with Google Maps API v3 + jQuery UI Tabs
body: <p>There are a number of problems, which seem to be fairly well-known, when using the Google Maps API to render a map within a jQuery UI tab. I've seen SO questions posted about similar issues (<a href="https://stackoverflow.com/questions/1150297/google-map-jquery-rendering-bug">here</a> and <a href="https://stackoverflow.com/questions/1009365/jquery-ui-gmaps-problems-for-me-at-least-help">here</a>, for example) but the solutions there only seem to work for v2 of the Maps API. Other references I checked out are <a href="http://www.coldfusionjedi.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps" rel="nofollow noreferrer">here</a> and <a href="http://mcloide.wordpress.com/2008/08/22/google-maps-in-a-tabbed-profile/" rel="nofollow noreferrer">here</a>, along with pretty much everything I could dig up through Googling.</p>
  
  <p>I've been trying to stuff a map (<strong>using v3 of the API</strong>) into a jQuery tab with mixed results. I'm using the latest versions of everything (currently jQuery 1.3.2, jQuery UI 1.7.2, don't know about Maps).</p>
  
  <p>This is the markup &amp; javascript:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="dashtabs"&gt;
          &lt;span class="logout"&gt;
              &lt;a href="go away"&gt;Log out&lt;/a&gt;
          &lt;/span&gt;
          &lt;!-- tabs --&gt;
          &lt;ul class="dashtabNavigation"&gt;
              &lt;li&gt;&lt;a href="#first_tab" &gt;First&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#second_tab" &gt;Second&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#map_tab" &gt;Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;!--  tab containers --&gt;
          &lt;div id="first_tab"&gt;This is my first tab&lt;/div&gt;
          &lt;div id="second_tab"&gt;This is my second tab&lt;/div&gt;
          &lt;div id="map_tab"&gt;
               &lt;div id="map_canvas"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$(document).ready(function() {
      var map = null;
      $('#dashtabs').tabs();
      $('#dashtabs').bind('tabsshow', function(event, ui) {
          if (ui.panel.id == 'map_tab' &amp;&amp; !map)
          {
              map = initializeMap();
              google.maps.event.trigger(map, 'resize');
          }
      });
  });
  
  function initializeMap() {
      // Just some canned map for now
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      return new google.maps.Map($('#map_canvas')[0], myOptions);
  }
  </code></pre>
  
  <p>And here's what I've found that does/doesn't work (<em>for Maps API v3</em>):</p>
  
  <ul>
  <li>Using the off-left technique as described in the jQuery UI Tabs documentation (and in the answers to the two questions I linked) doesn't work at all. In fact, the best-functioning code uses the CSS <code>.ui-tabs .ui-tabs-hide { display: none; }</code> instead.</li>
  <li>The only way to get a map to display in a tab at all is to set the CSS width and height of <code>#map_canvas</code> to be absolute values. Changing the width and height to <code>auto</code> or <code>100%</code> causes the map to not display at all, even if it's already been successfully rendered (using absolute width and height).</li>
  <li>I couldn't find it documented anywhere outside of the Maps API, but <code>map.checkResize()</code> won't work anymore. Instead, you have to fire a resize event by calling <code>google.maps.event.trigger(map, 'resize')</code>.</li>
  <li>If the map is not initialized inside of a function bound to a <code>tabsshow</code> event, the map itself is rendered correctly but the controls are not - most are just plain missing.</li>
  </ul>
  
  <p>So, here are my questions:</p>
  
  <ul>
  <li>Does anyone else have experience accomplishing this same feat? If so, how did you figure out what would actually work, since the documented tricks don't work for Maps API v3?</li>
  <li>What about loading tab content using Ajax as per the <a href="http://docs.jquery.com/UI/API/1.7.2/Tabs#Ajax_mode" rel="nofollow noreferrer">jQuery UI docs</a>? I haven't had a chance to play around with it but my guess is that it's going to break Maps even more. What are the chances of getting it to work (or is it not worth trying)?</li>
  <li>How do I make the map fill the largest possible area? I'd like it to fill the tab and adapt to page resizes, much in the way that it's done over at maps.google.com. But, as I said, I appear to be stuck with applying only absolute width and height CSS to the map div.</li>
  </ul>
  
  <p>Sorry if this was long-winded but this might be the only documentation for Maps API v3 + jQuery tabs. Cheers!</p>