Build a map infographic with Google Maps & JavaScript

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.

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)

	function loadCensusData(variable) {
	// load the requested variable from the census API
	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://api.census.gov/data/2012/acs5/profile?get=' +
	variable + '&for=state:*&key=YOUR_KEY_HERE');
	xhr.onload = function() {
	var censusData = JSON.parse(xhr.responseText);
	censusData.shift(); // the first row contains column names
	censusData.forEach(function(row) {
	var censusVariable = parseFloat(row[0]);
	var stateId = row[1];
	// keep track of min and max values
	if (censusVariable < censusMin) {
	censusMin = censusVariable;
	}
	if (censusVariable > censusMax) {
	censusMax = censusVariable;
	}
	// update the existing row with the new data
	map.data
	.getFeatureById(stateId)
	.setProperty('census_variable', censusVariable);
	});
	// update and display the legend
	document.getElementById('census-min').textContent =
	censusMin.toLocaleString();
	document.getElementById('census-max').textContent =
	censusMax.toLocaleString();
	};
	xhr.send();
	}

view raw loadCensusData.js hosted with ❤ by GitHub

Styling the data