Responsive Tabs / Posts /

Google Maps issue with Tabs can ajax load php or is there a trick?


I'm having an issue getting the Google Map to load when the tab it's on is clicked (4th tab)..

Not an uncommon problem after researching the issue.  I thought for a minute that your ajax tab might be the answer.  And I got it to load html content just fine.  But it breaks when it's php alone or in that div.  

Is there a way to load php (and google map)?  OR.. do you know any tricks to get that map to reload/resize.. or something to get it to refresh when it's tab is clicked?


Joe  10 years ago   viewed: 9390    

1 Answer

I guess the Google map requires that it should be in a visible container when the page is loaded. I don't know if there is a way to reload it. If there is, we can use the onTabSelect event handler to reload the map.

Currently I think you can place the map outside the tabber(wrapped it with a <div id="mapWrapper">...</div>, and place it somewhere out of view(#mapWrapper { position:absolute; top:-3000px; }, and when the target tab is clicked, we can use the onTabSelect to move the tabber within the mapWrapper into your content panel: 
function onTabSelect(index, targetElm, tabberId) { if (tabberId == "tabs1" && index == 3) { var mw = document.getElementById("mapWrapper"); if(mw.children.length) { var targetMapWrapper = document.getElementById("mapWrapper2"); targetMapWrapper.appendChild(mw.children[0]); } } }
Milo   10 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: