originally created for Where 2.0, 2011. Updated Jan 2012.
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!
Embed Map Visualization in web page
Google Maps API Fusion Tables Layer
Download the Data
- Download the zip file here: zip.
- Unzip. Zip file includes:
- population.csv - Population data for zip codes around the bay area
- embedded_map.html - Basic HTML page
Upload Data to Fusion Tables
- Go to Google Docs
- If you have not already created a Google account, create a Google account and then sign in
- Select Create -> Table (Beta)
- Click Choose File.
- Browse to find the population.csv file.
- Click Next >>.
- Click Next >> again.
- Update the Table name to Bay Area Population. Add any attribution data and/or change the description.
- Click Finish.
- The file will upload to Fusion Tables. Here's an example of what the table will look like in Fusion 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.
- Make sure you have the Population table open in your browser.
- In the Population table, select Merge.
- Paste the following URL in the Text box under Merge with: https://www.google.com/fusiontables/DataSource?docid=10Py_fhQGH_uPJt9BFHKMWv3Qdg6kbh6dQ_ncAA
- Click the Get button.
- 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.
- 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.
- Click Merge tables.
- Select Visualize > Map. You may initially see "data loading" messages. Wait a minute and zoom in or refresh to see the correct images.
- 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.
- Click on Configure info window.
- 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.
- Select the Custom tab.
Update the HTML to the following:
<div class='googft-info-window' style='font-family: sans-serif'>
- Click Save.
- Click on one of the zip code boundaries. The InfoWindow content should be similar to the following:
Now add some styling to the map to create an interesting visualization of the data.
- Click Configure styles.
- Select Fill color under Polygons in the left column.
- Select the Gradient tab.
- Select the radio button next to Show a gradient.
- In the drop-down menu next to Column, select Population.
- In the text box next to Through, enter the number 90900.
- Select any colors you want in the drop-down menus or keep the default.
- Click Save when done.
- The map will be updated with the new style.
Sharing and Permissions
New tables are automatically set to Private. The visibility needs to be changed to Unlisted or Public to embed in a web page.
- Click the Share button in the top right corner.
- Select the radio button next to Unlisted or Public. The visibility will be updated immediately on selection.
- Close the window.
Embedding a Fusion Tables Map Visualization in an HTML page
As an alternative to viewing a map in the Fusion Tables application, it is possible to embed a view of a Fusion Table based map visualization in an HTML page.
- Open the embedded_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.
- Go to Map visualization page for the example create above (if you have closed the window, find the table in your docs list at docs.google.com, reopen it and click on Visualize -> Map)
- Click on "Get embeddable link". You should see the following (your table id will be different):
- Select the text in the box "<iframe...........</iframe>". Copy the text.
- Go to the embedded_map.html text editor and paste the select text below the line "<h1>Bay Area Population with Embedded Map</h1>". The file should now look like:
- Save the file and open it in a browser. You should now see:
Advanced: Using the Google Maps API FusionTablesLayer to Display the map
- First, find the Table ID for your table. You can do this by:
- Selecting File > About. The Table ID is the value next to Numeric ID:.
- 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.
- Find the line that reads:
var tableid = XXXXXX;
- Replace the XXXXXX with your Table ID.
- Review the code. The code creates a new Map and a FusionTablesLayer to display on the Map.
- Save your updates.
- Open the map.html file in a browser. You should see your Fusion Table data on the map.
- 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:
where: 'Population > 40000'
Here are a couple useful tools that will help you work with Fusion Tables:
- Shape Escape: http://shpescape.com.
Shape Escape allows you to upload shape files to Fusion Tables. Simply go to shpescape.com and select the zipped shape file you want to upload. Shape Escape creates a Fusion Table with the shape file data for you!
- FusionTablesLayer Builder: http://bit.ly/ftlbuilder
Going a few steps beyond the built-in “Get embeddable code” feature, FusionTablesLayer Builder generates all the code necessary to include a Google Map with a Fusion Table Layer on your own website.