Fusion Tables Layer in Google Maps API

Maps in Fusion Tables are also available as Fusion Tables Layers in the Google Maps API. 

Using JavaScript to create the map directly in the webpage instead of an iframe means more flexibility to customize the map: 

  • Layer several maps together
  • Change the base map color and details
  • Include a search box or pull-down menu to change the mapped data
  • Turn off info windows
  • Use .css on the content of map info windows

Cut-n-paste coders can get started by following the instructions below. Intermediate coders can find code examples for additional tricks such as logically constructing map info window content or displaying locations with custom icons.

1. Generate starter code

Both the Fusion Tables web application and the Fusion Tables Layer wizard generate the complete HTML and JavaScript code for displaying the map on a webpage, without any programming.  

For the map to appear on a website, the table must be public or unlisted.

Publish a map tab

To see the code for the map tab you are currently looking at:

  1. Click Tools > Publish.
  2. Click "Get HTML and JavaScript."

Fusion Tables Layer wizard

The FusionTablesLayer wizard is an external tool that supports specifying a different base map color, layering several maps together, and even including a search box or pull-down menu to change the mapped data.

A Preview shows the map as you build it. The code is available to copy from the text box at the bottom of the page. 

2. Create and preview the webpage

While looking at the generated code, 

  1. Paste the contents of the text box to a plain text editor and save it.
    1. Choose a name with no spaces.
    2. Use an .html extension.
  2. Preview this file by dragging it onto an open web browser window.
  3. See "Making simple changes" below for ideas.

3. Host the webpage online

The Google Maps JavaScript API v3 has its own usage limits and Terms of Service.

Integrate code with an existing webpage

Optionally, you may have an existing webpage where you'd like to add the map. Here's an overview of the process for integrating the generated code document with an existing webpage document:

  1. Paste the two script tag sections into the head.
  2. Paste the style definitions for the map's dimensions into the style section of the head or the external style sheet.
  3. Paste <div id="map-canvas"></div> into the body where you'd like the map to appear.

There will be a few more pieces if you've used the Fusion Tables Layer wizard to add search controls.

Starting with the existing webpage where you'd like to add the map, make one change at a time, save, and test that nothing is broken in your page. The Javascript Console in Chrome can help with debugging.

 

Making simple changes

Edit map state

The map zoom level, map center, and map dimensions are based on the map's state when you copied the code. You can also edit the values directly, save, and reload the webpage until you get it just right.

The first two are in the JavaScript; look for "center" and "zoom." The map height and width are specified in the .css style section above. 

Styling map info windows

Call the class googft-info-window in a .css stylesheet to style info window content. Read about Customizing map info windows.

Preventing info windows

To turn off infowindows when a map layer is clicked:

  1. Find the line:
    map: map,
  2. Add a new line below it. Note the trailing comma:
    suppressInfoWindows: true,
  3. Save, reload, test.