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 


3 comments:

  1. Hi Piotr, I tried to use the downloaded file from Github and your FusionTable data. However it doesnt show the map, but only shows the list of the cities. Am I doing something wrong?
    thanks

    ReplyDelete
  2. Hi there !
    Yes sorry my fault... I got typo in css file name. Just change CSS file name to default.css, save and reload page.


    Best Piotr

    ReplyDelete
  3. Wonderful, it works now. I tried to embed the chart in the tabs and it works too!

    ReplyDelete

Fork me on GitHub