Assign Google Fusion Tables Data to display Google Maps InfoBubble - google-maps-api-3

Question

I am trying to create a map with data exported from my Google Fusion Tables. The problem is, I have so many data to be displayed including text and images. And I want to create info windows with tabs.
How will I be possibly display infobubble when I click on a marker? The code that I have now to retrieve Google Fusion Tables data is:
layer = new google.maps.FusionTablesLayer({
map: map,
query: {
select: "col1",
from: "xxxxxxxxxxxxxxxxxxxxxxxxxx"
},
options: {
styleId: 3,
templateId: 3
}
});
I already looked for ways to get this problem solved and I found this sample http://jsbin.com/efobeg/13/edit.
EDIT:
Here's the code that I am currently working on.
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 3,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'col7',
from: '10NhYAiDivSpUnjvNsOwZVTEPV-RjhRGmyEOGjs4'
},
map: map,
suppressInfoWindows: true,
options: {
styleId: 2,
templateId: 3
}
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(layer, 'click', function(e) {
var name = e.row['restaurantname'].value;
var cuisine = e.row['cuisine'].value;
var address = e.row['full_address'].value;
var rating = e.row['rating'].value;
if (rating != "") {
if (rating == 1) {
rating = "http://exrx.net/test_weewok2/1.png";
} else if (rating == 2) {
rating = "http://exrx.net/test_weewok2/2.png";
} else if (rating == 3) {
rating = "http://exrx.net/test_weewok2/3.png";
} else if (rating == 4) {
rating = "http://exrx.net/test_weewok2/4.png";
} else {
rating = "http://exrx.net/test_weewok2/5.png";
}
} else {
rating = "http://exrx.net/test_weewok2/1.png";
}
var review = e.row['review'].value;
if (review == "") {
review = "No one has reviewed this place.";
}
var contentString = [
'<div class="tabs">',
'<ul>',
'<li><span>Overview</span></li>',
'<li><span>Review</span></li>',
'<li><span>Images</span></li>',
'</ul>',
'<div id="tab-1">',
'<b>' + name + '</b><img src="' + rating + '" /><br>',
'<font size=1><b>' + address + '</b></font></center>',
'<p align=justify><font size=1>' + cuisine + '</font>',
'</p>',
'</div>',
'<div id="tab-2">',
'<p align=justify><i>"' + review + '"</i></p>',
'</div>',
'<div id="tab-3">',
'<p>Images will be displayed here.</p>',
'</div>',
'</div>'
].join('');
infowindow.setContent(contentString);
infowindow.setPosition(e.latLng);
infowindow.open(map);
$(".tabs").tabs({ selected: 0 });
});
}
Screenshot: