I was working on a client’s website earlier today, and I ran into a real head-scratcher of a problem. Basically, the page had multiple content tabs, and each tab would display different content. Pretty basic stuff, a simple content tabbing system. However, the problem was when we tried to display a tab (that wasn’t active on load) which had a Google map iframe embedded, the map wouldn’t show centralised, even though it displayed correctly when outside of the tab content container.
How it should look
The actual tabbing plugin being used was Post Tabs PRO, and the author has provided a solution, but it never worked for me, for various reasons, which I won’t get into.
I then started Googling around for solutions, www.proessays.biz and it quickly became apparent that I wasn’t the only one struggling; plenty of developers were experiencing similar problems with Google maps loading improperly with in tabs, and not just with the Post Tabs PRO plugin. However, the author of the plugin did say the following, “Generally, Google Maps and jQuery Tab causes issue with the positioning of the highlighted place”
I couldn’t find a solution that worked for me, and most of the threads discussing the problem were abandoned. However, a few people did mention that the problem was occurring because of Google maps not being able to calculate the size of the iframe on initialization, hence why the map shows off-centre. I wasn’t sure how true that was, but if that was the case, it gave me an idea.
I think the fundamental problem lies with Google maps, but I’m not sure, and I won’t want to point any fingers in anyone’s direction in case I am wrong 🙂 In any case, based on what I had read, I thought of a solution.
My idea was to reload all iframes for the particular tab that was being loaded. It’s not the cleanest of solutions, but it works, smartessaywriter and it isn’t too painful to implement.
Initially, the map will appear off-centre, but after a quick automatic refresh, it appears as it should. The code I used won’t work for everyone, but here it is anyways, just to give you some food for thought…
This is the HTML markup simplified
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<div class="wordpress-post-tabs"> <ul> <li><a href="pageURL#tab-1">Tab 1</a></li> <li><a href="pageURL#tab-2">Tab 2</a></li> </ul> </div> <div id="tabs"> <div id="tab-1"> <iframe>GOOGLE MAPS</iframe> </div> <div id="tab-2"> <iframe>GOOGLE MAPS</iframe> </div> </div>
This jQuery solution
1 2 3 4 5 6 7 8 9 10
What the code is doing
When a tab is clicked, the jQuery retrieves the ID after the hash, and then refreshes all the iframes with in the corresponding DIV which has the same ID. It’s crucial only the iframes with in the content tab required is refreshed, otherwise on click, every iframe on the page will refresh. In the event that there are multiple iframes on a single page, spread across different content tabs, they will all refresh and that could cause major performance issues.
Well, that was my solution to the problem. As said, my code won’t work for most people, but the general principle applies… try refreshing the iframe on click.
Please let me know if you have experienced this problem, and whether my solution works for you. And of course, if anyone has a better solution, please share.
Learning & sharing
This is where we store some of our Web Development thoughts, tips and tricks for both our own uses and for others to learn from. Sharing is caring.
Please feel free to contribute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.