Google Maps Not Working in jQuery Tabs

Question

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 he

Answer 1

Give this a try:

Change

<li><a href="#">Map Tab</a></li> 

to

<li><a href="#" id="maptab">Map Tab</a></li>

Then add this javascript

$(document).ready(function(){
  $('#maptab').bind('onClick', function() {
    google.maps.event.trigger(map, 'resize');
  });
});

In a script tag at the top of the page. What this should do for you:

By adding the id attribute to the tab link, you're explicitly specifying there's a map in there. You're then listening for the onClick event provided by the jQuery tabs library that fires when a tab is selected, which triggers re-sizing the map.