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 is simple. Maps must render in an element that has dimensions. If you use a tab system that hides the tab content, all elements inside the tab content have no dimensions while parent is hidden. If jQuery tools css lets you do it, set the "hidden" content offscreen instead of hidden.

In order to use: google.maps.event.trigger(map, 'resize');

You need access to the intitial map object variable which is "var wpgmappitymap1" but is scoped inside the map init function. If you make it a global variable you can then put it in your resize trigger

  google.maps.event.trigger(wpgmappitymap1, 'resize');