Dynamic Map Tabs with Google Drive Tabs (not jQuery-ui Tabs)

Question

After spending all day looking at this common problem, people have a google map insert program associated with dynamic tabs when the main page does not display the map correctly when the page loads. The card is not centered. Does anyone have any suggestions to fix this problem, I'm pretty much ready to try something.

I am currently using Dynamic Content . I am wondering if there is a way to fix this problem in my situation.

Just an example from the site.

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Contacts</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>


<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div> 
<div id="country2" class="tabcontent">
Tab content 1 here<br />Google Maps<br />
</div> 

google maps embd

<iframe width="400" height="425" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&q=Ace+Liquors&fb=1&gl=us&hq=ace+liquor+glendale&cid=17378010379165161653&t=m&ll=34.162084,-118.301747&spn=0.007546,0.008562&z=16&iwloc=A&output=embed"></iframe>

The personal code for contacts is as follows:

<li>
<a id="contact" rel="hours" href="#">
<span>Contact</span>
</li>

, , jquery, . - , , ?

Answer 1

, StackOverflow, -, , API Javascript Google.

, Javascript iframe, .

, . Google JsFiddle CSS (http://jsfiddle.net/bKaxg/342/)

, iframe

.content iframe{
    margin:0 auto;
    display:block;
}

Twitter Bootstrap (http://jsfiddle.net/K9LpL/248/)

script (http://jsfiddle.net/e3Lhc/29/)

: script, CSS, < 3 >

Answer 2

, <br> ? , iframe CSS. , , iFrame, div ( -), .

- :

<div id="country2" class="tabcontent">
<p>Tab content 1 here</p>
<div class = "mapWrapper">
    <iframe width="400" height="425" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&q=Ace+Liquors&fb=1&gl=us&hq=ace+liquor+glendale&cid=17378010379165161653&t=m&ll=34.162084,-118.301747&spn=0.007546,0.008562&z=16&iwloc=A&output=embed"></iframe>
</div>
</div> 

CSS

.tabcontent
{
    width: 100%; /* This must be set to something, or you won't be able to have
                     the inner div centered correctly*/
}
.mapWrapper
{
    width:auto; margin: 0 auto;
}