jQuery UI Tabs in Google Map InfoBox - jquery-ui

Question

I'm having a bit of a problem with putting a jQuery UI tab menu inside a Google Map InfoWindow.
The infowindows are created from a Fusion Table which is layered on the base map. I've got an example using the Maps infowindows that works perfectly (still has styling to be done and the data is incomplete, though)
However, the infowindows are a bit too restrictive and I need more flexibility in styling, so I switched over to using InfoBox.js. Thankfully, it fits in pretty well, and all I had to do was change a few selectors so it all matched up. The boxes work perfectly BUT the jquery tabs now don't work at all. The class attributes that should be created in the HTML, aren't.
Here's the original script using infowindows:
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('maps', '3', {other_params:'sensor=false'});
google.load('jquery', '1');
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 7,
center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col2>>1",
from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
},
styleId: 2,
map: map,
suppressInfoWindows: true
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(layer, 'click', function(e) {
var childpoverty = e.row['Child poverty rate'].value;
if (childpoverty > 22) {
pcolour = '<p style="color: red; font-weight: bold;">';
}
else if (childpoverty > 13) {
pcolour = '<p style="color: orange; font-weight: bold;">';
}
else {
pcolour = '<p style="color: green; font-weight: bold;">';
};
var sponsored = e.row['Sponsorship'].value;
if (sponsored == 1) {
contentString = [
'<div class="tabs">',
'<ul>',
'<li><span>Sponsor</span></li>',
'<li><span>Information</span></li>',
'</ul>',
'<div id="tab-1">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<img src="' + e.row['Logo'].value + '" width="100"></img>',
'</div>',
'<div id="tab-2">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>',
'</div>'
].join('')}
else {
contentString = [
'<div class="tabs">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>'
].join('')};
infowindow.setContent(contentString);
infowindow.setPosition(e.latLng);
infowindow.open(map);
$(".tabs").tabs({ selected: 0 });
});
}
</script>
And here's the script with the infowboxes
<link type="text/css" href="http://code.jquery.com/ui/1.8.12/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('maps', '3', {other_params:'sensor=false'});
google.load('jquery', '1');
google.load("jqueryui", '1');
</script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 7,
center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col2>>1",
from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
},
styleId: 2,
map: map,
suppressInfoWindows: true
});
var ib = new InfoBox();
google.maps.event.addListener(layer, 'click', function(e) {
var childpoverty = e.row['Child poverty rate'].value;
if (childpoverty > 22) {
pcolour = '<p style="color: red; font-weight: bold;">';
}
else if (childpoverty > 13) {
pcolour = '<p style="color: orange; font-weight: bold;">';
}
else {
pcolour = '<p style="color: green; font-weight: bold;">';
};
var sponsored = e.row['Sponsorship'].value;
if (sponsored == 1) {
iboxText = [
'<div class="tabs">',
'<ul>',
'<li><span>Sponsor</span></li>',
'<li><span>Information</span></li>',
'</ul>',
'<div id="tab-1">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<img src="' + e.row['Logo'].value + '" width="100"></img>',
'</div>',
'<div id="tab-2">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>',
'</div>'
].join('')}
else {
iboxText = [
'<div class="tabs">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>'
].join('')};
var myOptions = {
disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "white"
,opacity: 0.75
,width: "280px"
,padding: "5px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
ib.setOptions(myOptions);
ib.setContent(iboxText);
ib.setPosition(e.latLng);
ib.open(map);
$(".tabs").tabs({ selected: 0 })
});
}
</script>
Like I say, virtually completely the same, except the second one, no tabs.
I am SO stuck, any help would be so appreciated.

Answer 1

call $.tabs() when the domready-event of the infobox fires(the infobox has been attached to the DOM at this time, when you call $.tabs() earlier the infobox-content cannot be found by jQuery):
google.maps.event.addListener(ib,'domready',function(){
$(".tabs").tabs({ selected: 0 })
});

Answer 2

This worked for me:
google.maps.event.addListener(infoWindow, 'domready', function() {
jQuery("#tabs").tabs();
});