Fusion Tables Layer (Experimental)

1. Overview
2. Limits
3. Fusion Table Setup
4. Constructing a FusionTables Layer
5. Fusion Table Queries
6. Fusion Table Styles
7. Fusion Table Heatmaps

Note: The Fusion Tables layer is Experimental.

The Fusion Tables Layer renders data contained in Google Fusion Tables.

Overview

The Maps JavaScript API allows you to render data contained in Google Fusion Tables as a layer on a map using the FusionTablesLayer object. A Google Fusion Table is a database table where each row contains data about a particular feature; for geographic data, each row within a Google Fusion Table additionally contains location data, holding a feature’s positional information. The FusionTablesLayer provides an interface to Fusion Tables and supports automatic rendering of this location data, providing clickable overlays that display a feature’s additional data.

A sample Fusion Table, showing geographic data, is shown below:

Limits

You can use the Maps JavaScript API to add up to five Fusion Tables layers to a map, one of which can be styled with up to five styling rules.

In addition:

• Only the first 100,000 rows of data in a table are mapped or included in query results.
• Queries with spatial predicates only return data from within this first 100,000 rows. Therefore, if you apply a filter to a very large table and the filter matches data in rows after the first 100K, these rows are not displayed.
• When importing or inserting data, remember:
  • The total size of the data sent in one API call cannot exceed 1MB.
  • A cell of data in Fusion Tables supports a maximum of 1 million characters; it may sometimes be necessary to reduce the precision of coordinates or simplify polygon or line descriptions.
  • The maximum number of vertices supported per table is 5 million.
• When looking at the map, you may notice:
  • The ten largest-area components of a multi-geometry are shown.
  • When zoomed farther out, tables with more than 500 features will show dots (not lines or polygons).

Fusion Table Setup

Fusion Tables are tables of data that provide built-in geographic data support. For more information, see About Fusion Tables. For a Fusion Tables layer to display data within the API on a Google map, the table must satisfy the following criteria:

• The table must be shared as Public or as Unlisted.
• The table must have one or more columns exposed as a Location. In the Fusion Tables web interface, select Edit > Modify Columns and select the desired column(s).

The Location column must follow the formatting requirements below.

• Latitude/longitude coordinates can be entered in a single column, comma separated (latitude,longitude), or can be split across two columns (one column for latitude, and one for longitude). Refer to the Fusion Tables documentation for more information.
• Addresses must first be geocoded. In the Fusion Tables web interface, select File > Geocode.
• KML geometric data such as points, lines, and polygons are supported.

Constructing a FusionTables Layer

The FusionTablesLayer constructor creates a layer from a public Fusion table using the table’s Encrypted ID, which can be found by selecting File > About in the Fusion Tables UI.

To add a Fusion Tables layer to your map, create the layer, passing a query object with the following:

• A select property whose value is the column name containing the location information. You must use quotes around any column names that contain spaces, reserved words, or that do not begin with a letter.
• A from property whose value is either of the Encrypted ID.

Then, set the layer’s map to your Map object, as with any other overlay.

Note: Older versions of the Maps JavaScript API referenced a Fusion Table by its Numeric ID. While this method continues to work, the Encrypted ID is preferred.

The following example shows homicides within Chicago in 2009 using a public Fusion Table:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

View example.

Fusion Table Queries

Fusion Tables also allow you to apply powerful queries which can constrain a result set to a specified criteria. Queries are specified using a FusionTablesLayerOptions query parameter:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

where the locationColumn is an existing geocoded column of type Location. You must use quotes around any column names in the select or where fields that contain spaces, reserved words, or that do not begin with a letter.

Supported search operators are listed in the Fusion Tables documentation.

The following example displays locations along the CTA’s Red Line that had weekday ridership above 5000:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

View example.

Fusion Table Styles

The Fusion Tables layer constructor also accepts a FusionTablesLayerOptions styles parameter, to apply color, stroke weight, and opacity to lines and polygons. Marker icons can also be specified from the supported Map marker or Icon names.

Note: Styles can only be applied to a single Fusion Tables layer per map. You may apply up to five styles to that layer.

The styles parameter uses the following syntax:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Styles are applied on top of any styling which has been specified in the Fusion Tables web interface. Styles provided to the layer constructor are then applied in the order in which they’re listed, with any features matching multiple rules taking the last matching style.

To create a default style to apply to all features, create a style with no where clause:

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

The following example shows:

• A default style that colors all polygons green, with a 0.3 opacity level.
• All polygons whose ‘birds’ column exceeds 300 are colored blue. They retain the opacity level set by the default style.
• All polygons whose ‘population’ column exceeds 5 have their opacity level set at 1.0. They retain their fillColor values.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

View example.

Fusion Table Heatmaps

Fusion Tables also provide limited support for heatmaps, where the density of matched locations is depicted using a palette of colors. Current heatmaps use a red (dense) to green (sparse) gradient to indicate the relative prevalence of associated locations. You enable a heatmap by setting the layer’s FusionTablesLayerOptions heatmap parameter to enabled: true.

Note: Fusion Tables heatmaps are rendered server side. If you prefer client side heatmaps, use the Heatmap Layer instead.

The following example shows historic earthquake data using a heatmap:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

View example.