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

The problem (as stated above and in other places) is that the map div must be visible in order to work. So load the map in a tab that is visible. Then if you wish, change to the tab you want to display.

To do this I added a one-time event listener to the map. Inside that function I changed to the first tab. During the load, you do see the map area for about a second before the tab is changed. The advantage is that the user has to do nothing for this to work.

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     $("#Tabs").tabs('select',0);
});