loading layers from google fusion tables onto web maps using google maps api

This post will demonstrate loading data from our google fusion tables to create a vector layer on a web map using the google map api.

First we should have an active google account to be able to practice along. In addition, our google drive should have the app-Google Fusion tables installed in it. Web search ‘Installing google fusion tables in my google drive account’ to get a quick hands-on idea on how to install and use google fusion tables from your google drive.

Download sample data here:https://www.google.com/fusiontables/DataSource?docid=1xQnOYFbBSvgcWQofpi46tVLoAoRI8d_eo_PjXTMt

1. Let us start by opening our sample data using Google Fusion tables. Note that our file is in Xls format. Fusion tables open files in Xls,CSV, Text and KML formats. Note that you must make your file available to the public. Use the ‘Share’ option to set your data to ‘Public’. It is only then that the file will render as a layer on the web map.

Our sample table contains a collection of points which have two fields- longitude and latitude defining their geographic coordinates. Copy out the highlighted code as shown in the red boxed area on the screenshot below. Fusion tables allows us to define the location of the points uisng either latitude or longitude field, we choose latitude.

5

2. Now let us write a source code that would convert this table into a vector layer  on a web map using the google map api. The red boxed area covers the section of the javascript code that loads in the layer from Fusion tables. Further explanations are in red text.

loading layers from google fusion table - Notepad

 

3. Here is the map generated from the code:

3

Click on this link to see a live map from my github account:http://htmlpreview.github.io/?https://github.com/mayotunde/google/blob/master/fusionlayer

or Download the plain text file version of the source code here:https://www.dropbox.com/s/eh6mced9mnif05o/loading%20layers%20from%20google%20fusion%20table.txt?dl=0

Thank you for following the blog

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s