- Overview
- Limits
- Fusion Table Setup
- Constructing a FusionTables Layer
- Fusion Table Queries
- Fusion Table Styles
- 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); }
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); }
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); }
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); }