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?

What is the problem? Is the map not centred on the right location, or is the iframe not centered properly? — Bryan Rayner, Feb 08 '14 at 22:09
similar to this: http://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs — Outdated Computer Tech, Feb 08 '14 at 22:56
I feel like that's not relevant. That question is using the Google Maps API to generate the map directly in your page. You are using an iframe, which is a much different approach. — Bryan Rayner, Feb 09 '14 at 17:49
not really, because when they solve the problem they trigger an event when javascript detects /index.php#something shows up, do THIS. my script doesn't function that way, it does not trigger a #extension on the page like jquery ui tabs do. I've searched for a week straight without any success so far. and the majority of the answers i'm finding are using jquery ui tabs as the way to solve the problem, its possible that i don't know enough about javascript to use their method to make mine work. which is why i placed a bounty. — Outdated Computer Tech, Feb 10 '14 at 22:55
Can you describe the problem in more detail? I mean, what exactly is not working? Is the map not loading, is the map centred improperly... Can you host a demo of the problem somewhere on JSBin? — Bryan Rayner, Feb 12 '14 at 13:11
This is a WELL documented problem with google maps with TABS, if your page is running dynamic tabs, meaning the tabs do NOT reload a new page as you click on the tab, the google map does not render the page correctly when you click on the tab that show the map in question. THE PIN in the middle of the map is not centered. THAT is the problem. http://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs?lq=1 — Outdated Computer Tech, Feb 12 '14 at 18:31

vorillaz · Answer 1 · 2014-02-10T09:46:20.627

2

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/

edited Feb 10 '14 at 09:46

answered Feb 09 '14 at 15:09

vorillaz

6,098
2
30
46

I like the map better in the tab with a width of 100%. For example [http://jsfiddle.net/bKaxg/345/](http://jsfiddle.net/bKaxg/345/) – David Streck Feb 10 '14 at 17:42
your last example, Is my script, if you notice the tab you land on has to correct pin in the middle, and the rest of the tabs are not correct. This is the current problem, you're first line of css doesn't solve this problem, when a person enters the website they are not on the contacts tab, when they get the contact tab, the map is off center, hence your tab2, 3, 4. also: none of your examples actually work other then the first one ->bKaxg/342, but i'm not willing to change my tab structure at this point. – Outdated Computer Tech Feb 10 '14 at 23:23
Oh I see, please read the documentation of embedding google maps.I have played around with the width and height of the map in order to provide a generic solution of centering the actual map. If you want the marker placed in the center you have to play around with the JavaScript API or try to create a new embedded map. – vorillaz Feb 11 '14 at 17:24
its not about the marker, its about the map being in the center where the actual location is, its off to the side. – Outdated Computer Tech Feb 11 '14 at 21:28
Add the provide height and width on the iframe and the map would center. The iframe you have provided renders the same inside and outside the tabs. Check out the update fiddle http://jsfiddle.net/DqZT8/5/ – vorillaz Feb 11 '14 at 21:52
We seem to be on the wrong page, you clearly didn't read my comments i posted after you posted your answer. This is a WELL documented problem with google maps with TABS, if your page is running dynamic tabs, meaning the tabs do NOT reload a new page as you click on the tab, the google map does not render the page correctly when you click on the tab that show the map in question. None of your examples work, other then the CSS Tabs example. THE PIN in the middle of the map is not centered, didn't you notice that only 1 map was correctly centered and the rest were not? THAT is the problem. – Outdated Computer Tech Feb 12 '14 at 18:22

score 0 · Answer 2 · answered Feb 08 '14 at 22:15

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

i am using 4
to place the map in the middle of it's current tab. this didnt solve my problem, please reference http://jsfiddle.net/DqZT8/3/ is what the script is working off. i don't see what
's have anything to do with my script. — Outdated Computer Tech, Feb 11 '14 at 00:14

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

2 Answers2