How to make a map with Google Fusion tables

The workshop below was written by Kathryn Hurley at Google and is a brilliant guide to how to get started with Fusion tables. 

Fusion Tables is a modern data management web application making it easy to host, manage, collaborate on, visualize, and publish data tables online. Follow the steps below to upload your own data to Fusion Tables and create a map!

Topics covered:

Upload data

Merge tables

Configure InfoWindow

Style

Update permissions

Embed Map Visualization in web page

Advanced Topics:

Google Maps API Fusion Tables Layer

Download the Data

1. Download the zip file here: zip.
2. Unzip. Zip file includes:
   
   • population.csv – Population data for zip codes around the bay area
   • embedded_map.html – Basic HTML page
   • map.html – Basic HTML page with javascript for using MAPs API

Upload Data to Fusion Tables

1. Go to Google Docs
2. If you have not already created a Google account, create a Google account and then sign in
3. Select Create -> Table (Beta)

1. Click Choose File.

1. Browse to find the population.csv file.
2. Click Next >>.
3. Click Next >> again.
4. Update the Table name to Bay Area Population. Add any attribution data and/or change the description.
   
5. Click Finish.
6. The file will upload to Fusion Tables. Here’s an example of what the table will look like in Fusion Tables:https://www.google.com/fusiontables/DataSource?docid=10Py_fhQGH_uPJt9BFHKMWv3Qdg6kbh6dQ_ncAA

Merge tables

Now that you have the Bay Area population data in Fusion Tables, we’re going to merge with a table containing the zip code boundaries. Fusion Tables has special handling for KML (Keyhole Markup Language) that is used to represent geographical features such as points, lines and polygons / boundaries. The table containing zip code boundaries has two columns we are interested in: one for the zip code labeled “name” and one labeled “geometry” where each cell has KML for the corresponding boundary. We can use these boundaries to represent the locations when they are put on the map, otherwise they will only be points on the map.

1. Make sure you have the Population table open in your browser.
2. In the Population table, select Merge.
3. Paste the following URL in the Text box under Merge with: https://www.google.com/fusiontables/DataSource?docid=10Py_fhQGH_uPJt9BFHKMWv3Qdg6kbh6dQ_ncAA
4. Click the Get button.
5. Select the columns you want to merge on. Make sure the radio button next to Zip is selected in the left column, and select the radio button next to name in the right column. These columns both have zip codes in the same format. Merge works by looking for exact string matches in the selected columns and then linking matching rows together.
6. Enter a table name for your merged table in the text box next to Save as a new table named. Suggested name: Bay Area Population merged with KML.
   
7. Click Merge tables.
8. Select Visualize > Map. You may initially see “data loading” messages. Wait a minute and zoom in or refresh to see the correct images.
9. Click on one of the polygons on the map to see what is displayed in the InfoWindow.

Configure the InfoWindow

Now let’s customize the content in the InfoWindow.

1. Click on Configure info window.
2. Deselect all checkboxes except for the 2 next to Zip and Population. Notice how the HTML in the right panel is updated as you do this.
3. Select the Custom tab.
   
4. Update the HTML to the following:
   
   <div class=’googft-info-window’ style=’font-family: sans-serif’>
   <b>{Zip}</b><br>
   <b>Population:</b> {Population}
   </div>
5. Click Save.
6. Click on one of the zip code boundaries. The InfoWindow content should be similar to the following:94403Population: 37919

Styling

Now add some styling to the map to create an interesting visualization of the data.

1. Click Configure styles.
2. Select Fill color under Polygons in the left column.
3. Select the Gradient tab.
4. Select the radio button next to Show a gradient.
5. In the drop-down menu next to Column, select Population.
6. In the text box next to Through, enter the number 90900.
   

    

7. Select any colors you want in the drop-down menus or keep the default.
8. Click Save when done.
9. The map will be updated with the new style.

Sharing and Permissions

1. Click the Share button in the top right corner.
2. Select the radio button next to Unlisted or Public. The visibility will be updated immediately on selection.
3. Close the window.

Advanced: Using the Google Maps API FusionTablesLayer to Display the map

1. First, find the Table ID for your table. You can do this by:
   1. Selecting File > About. The Table ID is the value next to Numeric ID:.
2. Open the map.html file using a Text Editor (please ensure Rich Text Format is off). This file is in the zip file you downloaded at the beginning of this tutorial.
3. Find the line that reads:var tableid = XXXXXX;
4. Replace the XXXXXX with your Table ID.
5. Review the code. The code creates a new Map and a FusionTablesLayer to display on the Map.
6. Save your updates.
7. Open the map.html file in a browser. You should see your Fusion Table data on the map.
   
8. Now, update the query sent to the Fusion Table Layer to include a filter. To do so add the “where” clause below, just after line 40 as follows:

query: {

select: ‘geometry’,

from: tableid,

where: ‘Population > 40000’

},