Powerful data visualization with Symbols and Heatmaps in the Google Maps API

The Google Maps API provides a robust platform in which you can add geographical context to your data in a variety of ways. Data visualization is therefore one of the elements at the heart of the Maps API, and today we’re introducing two new techniques for visualizing your data in flexible and dynamic ways.



Symbols

At SXSW Interactive in 2011, I attended a session on geotemporal data visualization that made me keen to make it easier for Maps API developers to build visualizations similar to those discussed. For this reason I’m particularly excited to introduce a simple, yet powerful, new concept to the Maps API v3 that we call Symbols.



Unlike the image icons currently used for marking locations on a map, a Symbol is defined as a vector shape. The size, stroke width, color, and opacity of the shape, are all set by the Maps API application and can be dynamically modified. A small number of shapes, such as a circle, are provided by the Maps API, and custom shapes can be expressed as an SVG path.



Symbols open up a wide range of compelling new possibilities for data visualization and visual effects. For example, the below map illustrates the expansion of the Walmart chain of stores between 1962 and 2006:







In addition to using symbols to represent point features you can also decorate polylines with Symbols. One or more symbols, such as an arrowhead, can be placed at fixed positions on the polyline or repeated along the polyline. Because the polyline that has been decorated does not need to be visible, this feature can also be used to created dotted or dashed polylines, and just as the style of the symbols can be dynamically modified, so too can their location on the polyline:

Heatmaps

Developers often ask how they can represent large amounts of data on a map. Improvements in web browser technology have increased the number of markers that can be rendered by a Maps API application, but above a certain threshold the density of markers can overwhelm the user.



An alternative approach is to use a heatmap, and to enable this approach we’re launching support for browser rendering of heatmaps by the Maps API using the new Heatmap Layer. Your Maps API application can define the colour spectrum, intensity range, and behaviour of the heatmap when the map is zoomed. Here’s the Walmart example from above, but this time visualized as a heatmap:

If you have any technical questions about these new features, we recommend engaging with our developer community online, or joining our regular Google Maps API Office Hours. If you’re at I/O come see us in person at Office Hours in the Google Maps developer sandbox. We’d love to to meet you, hear how you’re using the Maps API, and answer any questions you may have!



Posted by Thor Mitchell, Product Manager, Google Maps API