jQuery Tabs and Google Maps

This post is more than 2 years old.

A reader wrote in earlier this week about an issue with Google Maps and jQuery tabs. He was trying to use a Google Map in one tab but the map wasn't rendering correctly. Here is a quick example showing what went wrong.

First, a simple HTML page with tabs and a map in the third tab:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link type="text/css" rel="stylesheet" href="theme/ui.all.css" />

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false" type="text/javascript"></script>

<script src="jquery-1.3.1.js"></script> <script src="jquery-ui-personalized-1.6rc6.js"></script> <script> var map

$(document).ready(function() {


if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("third-tab"));
	map.setCenter(new GLatLng(-34.397,150.644), 13)

}); </script> </head>


<div id="example" style="width:600;height:250"> <ul> <li><a href="#first-tab"><span>Content 1</span></a></li> <li><a href="#second-tab"><span>Content 2</span></a></li> <li><a href="#third-tab"><span>Content 3</span></a></li> </ul>

 &lt;div id="first-tab"&gt;
 This is the first tab.

 &lt;div id="second-tab"&gt;
 This is the second tab.

 &lt;div id="third-tab"&gt;


</body> </html>

I've blogged about jQuery tabs before (check the official docs for more information), so the only thing new here for my readers would be the Google Maps code. This was the first time I had ever played with them, so I went with their simplest example possible. (Actually, I did it on a page by itself first so I could see it working without the tabs.) Like all things Google, the API is incredibly powerful and complex to use. When run though, the problem is pretty evident:

Notice how the map doesn't fill the tab? The Tabs docs actually cover this issue a bit, but the advice they give doesn't work with the latest Google Maps API. Specifically they suggest the resizeMap() method which isn't a valid call. This led me to dig around some more and find there was something similar: checkResize().

I used the code from the jQuery site to execute when the 3rd tag was selected:

$('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "third-tab") { map.checkResize() } })

Unfortunately, this produced the same result. Then it occured to me - what if the map was resizing to some DIV/SPAN/whatever that jQuery Tabs created and the height wasn't the same as what I was seeing. On a whim I tried:

$('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "third-tab") { $(ui.panel).css("height","100%") map.checkResize() } })

This was close... but not exactly right:

It kinda looks like the 100% is referring to the complete tab (content and the header), but not quite exactly. I kept playing around and finally ended up with a hard coded exact number, 170. That seemed to work ok:

Obviously this involved a lot of grunt work and reloading, and obviously if you change the height of the main tab div you would have to change the number.

If I can make it run a bit better I'll let folks know.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Michael Williams posted on 6/6/2009 at 9:01 AM

I had a similar problem with spry tabs. What I found was that according to the map api docs the div tag the map loads in has to be displayed when the map is called. Since the second tab is in a display:none state the div loads weird. I worked around it by calling the map after the tab is revealed. It's also has the added benefit of not pulling the map unless it's viewed. Example: http://www.beckysrealestate...

Comment 2 by Raymond Camden posted on 6/6/2009 at 5:48 PM

I believe you are correct. However, even I create the map when the tab is selected, it still doesn't size 'right' height wise. I put "right" in quotes because, again, it does fill the tab div, which is oddly not as tall as the containing tabs.

As an example, if I use code to set the tab panel to red, you can see the red doesn't fill the entire div.

Comment 3 by Greg Johnston posted on 8/1/2009 at 1:39 AM

Just as a note--it saves a lot of reloading, helps with inspection, etc. if you use Firebug, a great extension for Firefox.

Comment 4 by Michael posted on 1/15/2010 at 5:15 PM

Thanks- currently working on a Bing map solution and ran into the same problem. I didn't actually need to do the .Resize() call. However, I needed to add
$("#liveMap").css("height","100%") after the map was loaded for it to render correctly.


Comment 5 by Vaughn posted on 3/24/2010 at 4:19 PM

The answer is actually in the jQuery docs, though it could be a little more explicit:


First, be sure that the code that initializes your map is called BEFORE the snippet that initializes your tabs.

Second -- and while this may not be necessary, it worked for me -- bind the trigger to the main tabs div before you initialize it.

Third, be sure that the resizeMap() call is attached to the map opject you created first, e.g., map.resizeMap().

The only annoyances I had were that the call to resizeMap() makes the browser jump to focus on the map and that it broke out of the default border that jQuery puts around the main tabs container. I couldn't seem to account for the jumping, but a simple border-size: 0 took care of the second.

Good luck!

Comment 6 by anonimo posted on 8/11/2011 at 8:33 PM

Mi solucion que fue testiada y funciona ver mas en el siguiente link.


Comment 7 by Raymond Camden posted on 8/11/2011 at 8:33 PM

Um, in English that is.... ? :)