Google Maps Embed with Dynamic Drive Tabs (NOT jquery-ui Tabs)

Question

After spending the entire day reading up on this common problem people have with google map's embed program related to dynamic tabs when the main page does not show the map correctly on page load from. The Map is not centered. Does anyone have any suggestion on how to fix this problem, I'm pretty much willing to try anything.

I'm currently using Dynamic Content Tabs. I'm wondering is there 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>

Personal Code for Contacts tab is as so:

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

from what i understand, i need a jquery piece of code that will load the maps when Contacts is clicked. Anyone have any suggestions to force the maps to load only when this event happens?

Answer 1

The question you are referring to from StackOverflow does not seem to fit your needs, as there is used the Javascript API of Google maps.

I assume that using your tabs Javascript could not calculate the iframe's initial width and height in order to center it .

I couldn't use Dynamic Content Tabs as the anchor tab links are not working in the demo page. I have managed though to use embedded Google maps in a JsFiddle with pure CSS tabs ( http://jsfiddle.net/bKaxg/342/ )

Take a look at the styles provided, I have set the iframe displayed as block

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

Also you can use Twitter Bootstrap's tabs ( http://jsfiddle.net/K9LpL/248/ )

Or even a simple and easy custom script approach ( http://jsfiddle.net/e3Lhc/29/ )

EDIT: I have managed to use the script provided, use the first line of my CSS to center your map http://jsfiddle.net/DqZT8/3/

Answer 2

To me, it seems that you are trying to rely on the < br> tags for layout? Perhaps styling the iframe using CSS will help. Typically, I place content like that iFrame in a second div (usually with a wrapper class) and then position the wrapper.

I would suggest something like this:

<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> 

Then in your 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;
}