Fusion Tables Layer in Google Maps API
Maps in Fusion Tables are also available as Fusion Tables Layers in the Google Maps API.
- 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
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.
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.
<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.
Host a webpage online with Google Drive
- Go to drive.google.com and sign in.
- Create a new folder, and share it "Public on the web."
- Upload the HTML file into this folder.
- Now find where this folder is hosted online. Here's how:
- Look at the URL bar of the browser window and find a long string of numbers and letters. Copy it.
- Open this example URL in a separate window. Don't worry that it says "Error" right now; we're going to fix that.
- Find a long string of numbers and letters in the URL: "A1B2C3D4E5F6G7H8J9". Replace it with the string you copied.
- Press Return to load the page. You should see your HTML page listed.
- Click on your HTML file to see it as a webpage.
You should see the page just like you saw in your browser earlier, but now you've made it available on the Web.
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.
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:
- Add a new line below it. Note the trailing comma:
- Save, reload, test.