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:
- Click Tools > Publish.
- 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.
2. Create and preview the webpage
While looking at the generated code,
- Paste the contents of the text box to a plain text editor and save it.
- Choose a name with no spaces.
- Use an .html extension.
- Preview this file by dragging it onto an open web browser window.
- See "Making simple changes" below for ideas.
3. Host the webpage online
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:
- Paste the two script tag sections into the head.
- Paste the style definitions for the map's dimensions into the style section of the head or the external style sheet.
- 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:
- Find the line:
map: map,
- Add a new line below it. Note the trailing comma:
suppressInfoWindows: true,
- Save, reload, test.