A geomap is a map of a country, continent, or region map, with colors and values assigned to specific regions. Values are displayed as a color scale, and you can specify optional hovertext for regions. The map is rendered in the browser using an embedded Flash player. Note that the map is not scrollable or draggable, but can be configured to allow zooming.
By: Google
We have two examples here: one that uses the regions display style, and another that uses the markers display style.
Code it yourself on the Visualization Playground
The regions style fills entire regions (typically countries) with colors corresponding
to the values that you assign. Specify the regions style by assigning options['dataMode']
= 'regions' in your code.
|
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(0, 0, 'Germany');
data.setValue(0, 1, 200);
data.setValue(1, 0, 'United States');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 400);
data.setValue(3, 0, 'Canada');
data.setValue(3, 1, 500);
data.setValue(4, 0, 'France');
data.setValue(4, 1, 600);
data.setValue(5, 0, 'RU');
data.setValue(5, 1, 700);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
The "markers" style displays a circle, sized and colored to indicate a value, over the regions that you specify. To use markers, you must include the following Google Maps API script with a key, unless you specify locations using latitude and longitude values.
<script src='http://maps.google.com/maps?file=api&v=2&key=ABCDEFG' type='text/javascript'></script>
Replace the dummy key "ABCDEFG" with your own key. Sign up for a Maps API key.
<html>
<head>
<!-- required only for markers, and only when not specifying lat/long values --> <script
src='http://maps.google.com/maps?file=api&v=2&key=ABCDEFG' type='text/javascript'></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'City');
data.addColumn('number', 'Popularity');
data.setValue(0, 0, 'New York');
data.setValue(0, 1, 200);
data.setValue(1, 0, 'Boston');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Miami');
data.setValue(2, 1, 400);
data.setValue(3, 0, 'Chicago');
data.setValue(3, 1, 500);
data.setValue(4, 0, 'Los Angeles');
data.setValue(4, 1, 600);
data.setValue(5, 0, 'Houston');
data.setValue(5, 1, 700);
var options = {};
options['region'] = 'US';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = 'markers';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
Get started quickly with an Interactive Code Sample you can edit and save.
The google.load package name is "geomap"
google.load('visualization', '1', {'packages': ['geomap']});
The geomap visualization class name is google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
Two address formats are supported, each of which supports a different number of columns, and different data types for each column. All addresses in the table must use one or the other; you cannot mix types.
dataMode option
is 'markers'. If this format is used, you do not need to include the Google
Map Javascript. The location is entered in two columns, plus two optional
columns:
dataMode option
set to either 'markers' or 'regions'. The location is entered in one column,
plus two optional columns:
Note: A map can display a maximum of 400 entries;
if your DataTable or DataView holds more than 400 rows, only the first 400
will be shown. The fastest modes are dataMode='regions' with locations
specified as ISO codes, and dataMode='markers' with lat/long
enties. The slowest mode is dataMode='markers' with a string address.
Important: Your DataTable must include every optional
column preceding any column that you want to use. So, for example, if you want
to specify a lat/long table, and only wanted to use columns 1, 2, and 4, your DataTable must
still define column 3 (though you don't need to add any values to it):
dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');
dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");
| Name | Type | Default | Description |
|---|---|---|---|
region |
string | 'world' | The area to display on the map. (Surrounding areas will be displayed as well.) Can be either a country code (in uppercase ISO-3166 format), or a one of the following strings:
Geomap does not enable scrolling
or dragging behavior, and only limited zooming behavior. A basic zoom
out can be enabled by setting the |
dataMode |
string | 'regions' | How to display values on the map. Two values are supported:
|
width |
string | '556px' | Width of the visualization. If no units are given, the default unit is pixels. |
height |
string | '347px' | Height of the visualization. If no units are given, the default unit is pixels. |
colors |
Array of RGB numbers in the format 0XRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Color gradient to assign to values in the visualization. You must have at least two values; the gradient will include all your values, plus calculated intermediary values, with the lightest color as the smallest value, and the darkest color as the highest. |
showLegend |
boolean | true | If true, display a legend for the map. |
showZoomOut |
boolean | false | If true, display a button with the label
specified by the zoomOutLabel property. Note that
this button does nothing when clicked, except throw the zoomOut event.
To handle zooming, catch this event and change the region option.
You can only specify showZoomOut if
the region option
is smaller than the world view. One way of enabling zoom in behavior would
be to listen for the regionClick event, change
the region property to the appropriate region, and reload the map. |
zoomOutLabel |
string | 'Zoom Out' | Label for the zoom button. |
| Method | Return Type | Description |
|---|---|---|
draw(data, options) |
None | Draws the map. Can return before drawing is done (see drawingDone() event). |
getSelection() |
Array of selection elements | Standard getSelection() implementation. Selected elements
are rows. This method only works when the dataMode option
is 'regions'. You can only select a region with an assigned value. |
setSelection(selection) |
None | Standard setSelection() implementation. Treats a selection
as a row selection, and supports multiple row selections. Only regions
with assigned values can be selected. |
| Name | Description | Properties |
|---|---|---|
select |
Fired when the user clicks a region with an assigned value. To learn
what has been selected, call Note: Because of certain limitations, the |
None |
regionClick |
Called when a region is clicked. Works both for 'regions' and 'markers' Note: Because of certain limitations, the |
An object with a single property, region, that is a string
in ISO-3166 format describing the region clicked. |
zoomOut |
Called when the zoom out button is clicked. To handle zooming, catch
this event and change the Note: Because of certain limitations, the |
None |
drawingDone |
Called when the geomap has finished drawing. | None |
Locations are geocoded by Google Maps. Please see the Google Maps Terms of Service for more information on their data policy.
Because of Flash security settings, this (and all Flash-based visualizations) might not work correctly when accessed from a file location in the browser (e.g., file:///c:/webhost/myhost/myviz.html) rather than from a web server URL (e.g., http://www.myhost.com/myviz.html). This is typically a testing issue only. You can overcome this issue as described on the Macromedia web site.