Customize map info windows

By default, Fusion Tables draws a little bit of data from the table and displays it in the info window that appears when a viewer clicks on a map feature. You can customize the content and appearance of this info window.

The info window layout you create will apply to the map when seen in Fusion Tables, when embedded in webpages, and in exported KML files.

To customize the info window in the New look:

  1. While looking at the map, select Tools > Change map, then click the Change info window button

To customize the info window in Classic:

  1. Click Visualize > Map
  2. Click the "Configure info window" link above the map and select the template to use.

The automatic template

The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.

Any format applied to the data in the column will show here. For example, if a column contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window.

Create a custom template

Click the "Custom" tab to create an HTML template that specifies the layout of the info windows. To pull in data from each row of a table, use the column's name inside curly braces: {Column Name}. For example, if you have a column named "Date" in your table, put {Date} into the template HTML.

Tips:

  • Apply formats to data columns under Edit > Modify columns. For example, format a number as a currency to have it appear with the currency symbol in the info window.
  • To add a link that opens in a new page, use target="_blank". For example:
    <a href="{link URL}" target="_blank">{link text}</a>
  • In-line CSS styling is supported within the template. For example to add a yellow highlight in the background of a table cell:
    <td style="background-color:yellow">text here</td>
  • To create a scroll bar, surround the template HTML in a div tag to specify the info window's size. For example:
    div style='width: 330px; height: 240px; overflow: auto;'
  • Specify a height and width for images in the HTML content. This helps avoid content spilling outside the info window. For example:
    <img height="200" width="100" src="{imageURL}"> 
  • Add conditional logic to your info window. Tip: Use dynamic templating

This tutorial offers step-by-step instructions for creating a custom template.

CSS styling for the info window

When using the map via the Maps API FusionTablesLayer class, styles declared for the hosting page will apply to the display of content in the info window.

By default the automatic and custom info window content are wrapped in a div with class googft-info-window. This allows the hosting page to specify styles scoped to only info window content.

For example, the CSS style declaration below will create a yellow highlight on all table cells within the info window content, but no other tables on the page:

.googft-info-window td { background-color: yellow }

When using a custom template, you can change the class name and create additional divs with their own class names as needed.