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

When developing a website which included a map tab content I ran into the same issue. The site is http://samet.com.ar (in spanish, click on the map icon or the 'ubicacion' link). The same error you mention arose whenever the tab div loaded together with the other ones in its tab group. I've found out that if I could manage to give it some time to load after the other tabs did, then there wouldn't be any problem.

I could afford to do that because anyway I gave some 3.5 sec for the wrapper to show up in order to get all the background photos loaded and the map is in an invisible tab at load time, so I don't need it to show up right away.

The map tab then loads as a callback function right after the whole wrapper does. If you inspect the page, look for id 'pane-container'. Inside 'panes' you'll find the map div loaded at the end.

The relevant jQuery code I'm using in the index.php page is as follows:

I hope this helps somehow. Forgot to mention that the map code is embedded as a content in a specific post. (BTW, the map marker is located on the upper right on purpose to show the main access roads.)

Cheers!