Create a Map

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!

Download the Data

  1. Download the zip file here: zip.
  2. Unzip. Zip file includes:

Upload Data to Fusion Tables

  1. Go to Fusion Tables.
  2. Select New table > Import table.
  3. Click Choose File.
  4. Browse to find the population.csv file.
  5. Click Next >>.
  6. Click Next >> again.
  7. Update the Table name to Population. Add any attribution data and/or change the description.
  8. Click Finish.
  9. The file will upload to Fusion Tables.
  10. Repeat steps 2-8 to upload the states.kml file to Fusion Tables.

Merge tables

Now that you have the US population data and the state KML in Fusion Tables, merge the two tables.

  1. Open both the Population and States KML tables in separate tabs in your browser.
  2. In the Population table, select Merge.
  3. Go to the States KML table, and copy the URL.
  4. Paste the URL in the Text box under Merge with.
  5. Click Get.
  6. Select the columns you want to merge on. Make sure the radio button next to Region is selected in the left column, and select the radio button next to name in the right column.
  7. Enter a table name for your merged table in the text box next to Save as a new table named. Suggested name: Population Merged with KML.
  8. Click Merge tables.
  9. Select Visualize > Map. If a dialog box opens, click Stop. This stops Fusion Tables from geocoding the Region column. Fusion Tables recognized the Region column as a Location and wants to geocode the locations. We're going to be using the geometry column instead of the Region column, so geocoding the Regions is not necessary.
  10. In the drop-down menu at the top left of the map, select geometry . This selects to display the state boundaries on the map. If the map does not show the polygons at this point, zoom in.
  11. Click on a state to see what is displayed in the InfoWindow.

Configure the InfoWindow

Change how the content is displayed in the InfoWindow.

  1. Click on Configure info window.
  2. Select Custom in the drop-down menu next to Info Window Template:.
  3. In the text area under Custom Html, you can enter any HTML and inline CSS to format the InfoWindows. Data from the table can be included by entering the column name surrounded by curly brackets. Enter the following code into the text area:
            <b>{Region}</b><br />
            Population: {Population}
            
  4. Click Save.
  5. Click on one of the states. The InfoWindow content should be similar to the following:

    California
    Population: 4953054

Styling

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

  1. Click on 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 10000000 (10 million).
  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.

Embedding Your Map into a Webpage

Now that you have a nice, styled map, it's time to embed it into a webpage.

  1. First, we need to change the visibility of the table. New tables are automatically set to Private. The visibility needs to be changed to Unlisted or Public to embed in a web page. To change the visibility of the table:
    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.
  2. Click on the Get embeddable link link above the map.
  3. Copy the HTML code in the text area that is displayed.
  4. Open the map.html file in a text editor (the map.html was in the zip file you downloaded at the beginning of this tutorial).
  5. Paste the HTML code in the file under the text:
          	<!-- Insert embeddable code below -->
          	
  6. Save the file.
  7. Open the map.html file in a browser. The map is embedded on the page.

Fusion Tables Layer

Use the following tool to edit a Google map, add a layer to the map, then optionally add a search to the map.

FusionTablesLayer Builder

Want to learn more about the Fusion Tables Layer? Check out the FusionTablesLayer documentation to find out how to use the Google Maps API to embed your map in a website. Sample code can be found here.

Your own data

Now upload your own data to Fusion Tables!

Where to find data:

You can upload shape files to Fusion Tables using Shape Escape. http://shpescape.com