Load google maps on tabs

I just spend 2 hours plus fighting with this bug , it is one of the common bug I solved before , just that I never think toward this direction and that cause my precious 2 hour on debugging.

So what happen is I m using geo mashup plugin for one of the client site , the client is into property industry , that’s why they need to show case the property on the google maps. On a single page entry , I have the property details and 3 tabs at the bottom.

So the simple way to do this , load all the data for each tabs, then use jQuery to show and hide when the tabs switching , this work perfectly ok on Chrome, but on Firefox and IE , both are having some weird problem.

The problem is the tabs is hidden when loading the google maps which cause it either out of shape ( on IE ) or showing the maps without the icons ( Firefox ). If you using native Google Maps API , I think you can just call the resize method through the maps event , this will allow the Maps tab resize/refresh.

So I been spending time to drill in the geo mashup plugins to see how to solve this, it seem like there is no internal function to call the resize function, then I try to digging around see how to call out the Global object in order to work on it, no luck too.

2 hour later finally think of a way, since the google maps is load through iframe, just use jQuery to reload the iframe will do. this help to resolve some of the issue, yet the performance doesn’t really look good, on Firefox some time it will show a random address then slowly re-render to the correct address.

I tweak the code again to avoid the maps load in the first run , only load the maps when user click on the maps tabs.This is better than the previous version, at least no need to keep refreshing and giving the correct result, I added a little trigger too which will do this load map action only if one of the default class is available, once I load the map, I remove the default class, so the next condition check won’t be able to load the map.

Lesson to take home , think about the root cause rather then waste time fighting on the surface.