title: Google Maps Not Working in jQuery Tabs
body: <p>Google maps not working when placed inside jQuery tabs is a question that's all over the web. In my research so far none of the solutions seem to work. Hopefully someone here can help...</p>
  
  <p>This is a screenchot of the error in Firefox 10, Chrome 17, Safari 5.1.2, Opera 11.61.
  <a href="http://www.flickr.com/photos/75523633@N04/6932970713/" rel="noreferrer">http://www.flickr.com/photos/75523633@N04/6932970713/</a></p>
  
  <p>The error is not present in IE8 and is intermittant in 9. In Firefox, it goes away when you open FireBug.</p>
  
  <p>The site is in Wordpress 3.3.1 and the map is generated/retrieved via a plugin. It does not seem to matter which maps plugin I use; the error remains the same. Based on my research, this appears to be js/jQuery problem between the tabs and the Google Map API javascript, not a Wordpress/plugin problem.</p>
  
  <p>Here is my code. Right now, I'm using the wp-gmappity-easy-google-maps plugin for the maps, but I have also tried the comprehensive-google-map-plugin. Both work great outside the tabs.</p>
  
  <p>HTML:</p>
  
  <pre><code>// Header calls:
  &lt;script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'&gt;&lt;/script&gt;
  // HTML Body:
  &lt;div class="tabs_framed_container"&gt;
  &lt;ul class="tabs_framed"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Map Tab&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tabs_framed_content"&gt;
      &lt;h2&gt;Tab 1 Content&lt;/h2&gt;
      &lt;!-- Some Content --&gt;
  &lt;/div&gt;
  &lt;div class="tabs_framed_content"&gt;
      &lt;h2&gt;Tab 2 Content&lt;/h2&gt;
      &lt;!-- Some Content --&gt;
  &lt;/div&gt;
      &lt;h2&gt;Tab 3 Content&lt;/h2&gt;
      &lt;!-- Some Content --&gt;
  &lt;/div&gt;
  &lt;div class="tabs_framed_content"&gt;
      &lt;div class="map_container"&gt;
          &lt;div style="width:900px;margin-left:auto;margin-right:auto;"&gt;
              &lt;div class="wpgmappity_container" id="wpgmappity-map-1" style="width:900px;height:400px;margin-left:auto;margin-right:auto;"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              function wpgmappity_maps_loaded1() {
              var latlng = new google.maps.LatLng(42.4005322,-71.2750094);
              var options = {
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  zoomControl : true,
                  zoomControlOptions :
                  {
                      style: google.maps.ZoomControlStyle.SMALL,
                      position: google.maps.ControlPosition.TOP_LEFT
                  },
                  mapTypeControl : true,
                  mapTypeControlOptions :
                  {
                      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                      position: google.maps.ControlPosition.TOP_RIGHT
                  },
                  scaleControl : true,
                  scaleControlOptions :
                  {
                      position: google.maps.ControlPosition.TOP_LEFT
                  },
                  streetViewControl : true,
                  streetViewControlOptions :
                  {
                      position: google.maps.ControlPosition.TOP_LEFT
                  },
                  panControl : false,  zoom : 14
              };
              var wpgmappitymap1 = new google.maps.Map(document.getElementById('wpgmappity-map-1'), options);
              var point0 = new google.maps.LatLng(42.4005322,-71.2750093);
              var marker1_0 = new google.maps.Marker({
                  icon : 'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png',
                  position : point0,
                  map : wpgmappitymap1
                  });
              }
              jQuery(window).load(function() {
                  wpgmappity_maps_loaded1();
              });
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tabs_framed_content"&gt;
      &lt;h2&gt;Tab 2 Content&lt;/h2&gt;
      &lt;!-- Some Content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the relevant CSS:</p>
  
  <pre><code>.tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;}
  .tabs_framed_container{margin-bottom:40px;}
  .tabs_framed a{
      display:block; position:relative; background:#fafafa; border:1px solid #E5E5E5; padding:7px 30px; margin-right:2px;
      font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; line-height:10px; color:#777;
      opacity:1; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;
  }
  .tabs_framed a:hover{color:#20548B;text-decoration:none;background:#fff;}
  .tabs_framed a.current{color:#000;cursor:default;border-bottom:1px solid #fff;background:#fff;}
  .tabs_framed li,{padding:0;margin:0;list-style-type:none;float:left;}
  .tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:30px 30px 15px 30px;}
  
  div.wpgmappity_container img { 
      background-position: 0% 0%;
      background-color: none !important;
      max-width: none !important;
      background-image: none !important;
      background-repeat: repeat !important;
      background-attachment: scroll !important;
  }
  </code></pre>
  
  <p>Here is a link to the file that governs my tabs:
  <a href="http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js" rel="noreferrer">http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js</a></p>
  
  <p>flowplayer.org/tools/forum/25/79274 is one solution I found (scroll to bottom). However, the checkResize and resizeMap no longer work (see api reference at code.google.com/apis/maps/documentation/javascript/reference.html#Map, scroll down a little to "Events" and find google.maps.event.trigger(map, 'resize') which is apparently the replacement code). www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps is another writeup that is too old. </p>
  
  <p>I've seen this proposed:</p>
  
  <pre><code>jQuery(document).ready(function(){
  jQuery('.tabs_container').bind('tabsshow', function(event, ui) {
      if (ui.panel.id == "map-tab") {
          google.maps.event.trigger(map, 'resize');
      }
  });
  });
  </code></pre>
  
  <p>but I have no idea how to implement it (tried a few ways with no success) or if it would even work. </p>
  
  <p>From all my research, it looks like you have to trigger a map resize event when the tab containing the map is selected. So far, I've had no luck adapting any of the solutions out there - espceially since I'm mot familiar with js/jQuery. It seems like someone familiar with js or jQuery could solve this. </p>
  
  <p>Please help me. </p>