Build a map infographic with Google Maps & JavaScript
April 9th, 2014 | Published in Google Maps
We recently announced the launch of the data layer in the Google Maps JavaScript API, including support for GeoJSON and declarative styling. Today we’d like to share a technical overview explaining how you can create great looking data visualizations using Google Maps.
Here’s our end goal. Click through to interact with the live version.
 |
|
Data provided by the Census Bureau Data API but is not endorsed or certified by the Census Bureau.
|
The map loads data from two sources: the shape outlines (polygons) are loaded from a public Google Maps Engine table and we query the US Census API for the population data. You can use the controls above the map to select a category of data to display (the "census variable"). The display is then updated to show a choropleth map shading the various US regions in proportion to the values recorded in the census.
How it works
When the map loads, it first queries the Google Maps Engine API to retrieve the polygons defining the US state boundaries and render them using the loadGeoJson method. The controls on the map are used to select a data source and then execute a query against the US Census Data API for the specified variable.
Note: At the time of writing, the data layer and functions described here require you to use the experimental (3.exp) version of the Maps API.
Loading polygons from Maps Engine
The Maps Engine API's Table.Features list method returns resources in GeoJSON format so the API response can be loaded directly using loadGeoJson. For more information on how to use Maps Engine to read public data tables, check out the developer guide.
The only trick in the code below is setting the idPropertyName for the data that is loaded. When we load the census data we'll need a way to connect it with the Maps Engine data based on some common key. In this case we're using the 'STATE' property.
Importing data from the US Census API
The US Census Bureau provides an API for querying data in a number of ways. This post will not describe the Census API, other than to say that the data is returned in JSON format. We use the state ID, provided in the 2nd column, to look up the existing state data (using the lookupId method of google.maps.Data) and update with the census data (using the setProperty method of google.maps.Data)
Styling the data
Data can be styled through the use of a Data.StyleOptions object or through a function that returns a Data.StyleOptions object. Here we create a choropleth map by applying a gradient to each polygon in the dataset based on the value in the census data.
In addition to the coloring, we've created an interactive element by adding events that respond to mouse activity. When you hover your mouse cursor (or finger) over a region with data, the border becomes heavier and the data card is updated with the selected value.
We’ve also used a custom basemap style in this example to provide some contrast to the colorful data.
Check out Google Maps Engine if you need somewhere to store your geospatial data in the cloud, as we’ve done here. If you have any questions on using these features, check out the docs for the data layer and the Maps Engine API or head over to Stack Overflow and ask there. You can also check out this article’s permanent home, where the interactive version lives.
In addition to the coloring, we've created an interactive element by adding events that respond to mouse activity. When you hover your mouse cursor (or finger) over a region with data, the border becomes heavier and the data card is updated with the selected value.
We’ve also used a custom basemap style in this example to provide some contrast to the colorful data.
Check out Google Maps Engine if you need somewhere to store your geospatial data in the cloud, as we’ve done here. If you have any questions on using these features, check out the docs for the data layer and the Maps Engine API or head over to Stack Overflow and ask there. You can also check out this article’s permanent home, where the interactive version lives.
Posted by Mark McDonald, Google Developer Relations Team