Google fusion table and data visualization - Info Window with tabs for Fusion Table

TabInfoWindow4FusionTable is a simple script for using a JQuery UI Tabs to display data from Fusion table on the Map. Tabs are easy to implement and can be built to work with your existing markup. Creating tabbed interfaces becomes a piece-of-cake when using the Tabs function in the jQuery UI library. It can be utilized to create completely unique interfaces without having to be a coding expert.

This guide will walk through the process of adding JQuery tabs to your map.

DEMO is available on GitHub 


1. First you need to prepare your data in FusionTable, this is how my data looks like, columns names are particularly important.

You can see my table live here

2. Now all you need to do is download my script from GitHub and open index.html file in text editor. Personally I recommend Notepad++. Please remember that most of WYSIWYG editors mees-up your code.

3. File is dived into 3 scripts:
     1. Query Fusion table and create table with data for sidebar.
     2. Geocode names and let you click and zoom to selected location.
     3. Last one create InfoWindow and add Tabs content.

4. Now what you need to do is to change Fusion table ID and columns names with your's.

You can query your table and add some HTML to InfoWindow. For example this will display, content from column Floors.

Floors Number: <b>' + e.row['Floors'].value + '</b>

You can also add links (like in my examples photos), or videos from YouTube, Vimeo and map from Google Maps. 

You can style your tabs with CSS (file default.css), good examples can be found here