Google fusion table and data visualization - JQuery simple slider and Google FusionTableLayer - tutorial

Adding Fusion Tables as a layer to your Google Map is a great way to display data. One of my favorite aspects of Fusion Tables is the flexibility and ability to customize the style of the added Fusion Table layer through queries.  This tutorial is about how to make simple slider using fusion tables and Google Maps API with little support from jQuery. In this tutorial we will use JQuery User Interface that's great tool for adding jquery features. At http://jqueryui.com/slider/ you an chek all of the slider options. We are going to use minimum, you can check out the demo there to see all.

This tutorial is for total beginners I assume that you have some knowledge of HTML. You don't have to be an expert, just remember coding it's intelligent copy & paste.


1. First you need to upload data to Fusion Tables and create map, how to - you can check in this tutorial .
2. Now it's starting to be more fun, you need to create FusionTableLayer, the best way is to use Fusion Table Layer Wizard from Google. Just follow instructions.

TIP: If you get error "no viz=MAP found" just copy the publish link from MAP tab. And remember to share your table first. 

3. Finally we got our FusionTableLayer, all we need to do is to copy ID  only. Let's try to keep it simple so don't change other parameters for now.

4. Copy ID and keep it in notepad or other text editor like Notepad ++. Now download repo from GitHub  and open slider_tutorial_example.html file in text editor.

TIP: Try to not using WYSWIG editors in most case they add some addition code automatically to your html file, and we don't need this...

5. Now we need to copy&paste few lines from FusionTable wizard to slider_tutorial_example.html. First change Fusion Table ID and  Column with address Country Name or other geographical reference) [lines 76-77 & 96-97]

6. Now we need to set parameter of our slider [ line 98].





What is important, this slider will query only selected column (one column).

TIP: For start we can use simple operators like below

==      Equal to
!=      Not equal to
>       Greater than
>=      Greater than or equal to
<       Less than
<=      Less than or equal to

7. Save it and run in your internet browser, if your set everything correct you should see your map. If not you need to go back and correct.

TIP: You can inspect errors with your browser Inspect Element function, just right click on page and Inspect Element and then Console. You will see all JavaScript errors. This function depend on the browser in Chrome and Firefox it's build in in other you need to add this. 

8. Now we can play with slider settings, depending on data we store in our fusion tables [line 88-91].

DEMO on GitHUB