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() {
$("#example").tabs();
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("third-tab"));
map.setCenter(new GLatLng(-34.397,150.644), 13)
}
});
</script>
</head>
<body>
<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>
<div id="first-tab">
This is the first tab.
</div>
<div id="second-tab">
This is the second tab.
</div>
<div id="third-tab">
</div>
</div>
</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.