Overview
The Google Map Chart displays a map using the Google Maps API. Data values are displayed as markers on the map. Data values can be coordinates (lat-long pairs) or addresses. The map will be scaled so that it includes all the identified points.
If you want your maps to be line drawings rather than satellite imagery, use a geochart instead.
Named Locations
You can identify the places to put markers by name, as shown below in this map of the top ten countries by population.
When the user selects one of the markers, a tooltip with the name
and population of the country is displayed, because we used
the showTip option. Here's the full HTML:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', { 'packages': ['map'] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population'],
['China', 'China: 1,363,800,000'],
['India', 'India: 1,242,620,000'],
['US', 'US: 317,842,000'],
['Indonesia', 'Indonesia: 247,424,598'],
['Brazil', 'Brazil: 201,032,714'],
['Pakistan', 'Pakistan: 186,134,000'],
['Nigeria', 'Nigeria: 173,615,000'],
['Bangladesh', 'Bangladesh: 152,518,015'],
['Russia', 'Russia: 146,019,512'],
['Japan', 'Japan: 127,120,000']
]);
var options = { showTip: true };
var map = new google.visualization.Map(document.getElementById('chart_div'));
map.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Geocoded Locations
You can also specify locations by latitude and longitude, which loads faster than named locations:
The above chart identifies four locations by latitude and longitude.
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["map"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, {showTip: true});
}
</script>
</head>
<body>
<div id="map_div" style="width: 400px; height: 300px"></div>
</body>
</html>
Customizing Markers
You can use marker shapes located elsewhere on the web. Here's an example using blue pins from iconarchive.com:
If you select pins in the above chart, they slant. PNGs, GIFs, and JPGs are supported.
var options = {
icons: {
default: {
normal: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["map"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var options = {
icons: {
default: {
normal: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_markers_div'));
map.draw(data, {showTip: true});
}
</script>
</head>
<body>
<div id="map_markers_div" style="width: 400px; height: 300px"></div>
</body>
</html>
Loading
The google.load package name is "map".
google.load("visualization", "1", {packages: ["map"]});
The visualization's class name is google.visualization.Map.
var visualization = new google.visualization.Map(container);
Data Format
Two alternative data formats are supported:
- Lat-Long pairs - The first two columns should be numbers designating the latitude and longitude, respectively. An optional third column holds a string that describes the location specified in the first two columns.
- String address - The first column should be a string that contains an address. This address should be as complete as you can make it. An optional second column holds a string that describes the location in the first column. String addresses load more slowly, especially when you have more than 10 addresses.
Note: The Lat-Long pairs option loads maps much faster, especially with large data. We recommend that you use this option for large data sets. Please visit Google Maps API to find out how to transform your addresses to lat-long points. The map can display a maximum of 400 entries; if your data holds more than 400 rows, only the first 400 will be shown.
Configuration Options
| Name | Type | Default | Description |
|---|---|---|---|
| enableScrollWheel | boolean | false | If set to true, enables zooming in and out using the mouse scroll wheel. |
| showTip | boolean | false | If set to true, shows the location description as a tooltip when the mouse is positioned above a point marker. |
| showLine | boolean | false | If set to true, shows a Google Maps polyline through all the points. |
| lineColor | string | default color | If showLine is true, defines the line color. For example: '#800000'. |
| lineWidth | number | 10 | If showLine is true, defines the line width (in pixels). |
| mapType | string | 'hybrid' | The type of map to show. Possible values are 'normal', 'terrain', 'satellite' or 'hybrid'. |
| useMapTypeControl | boolean | false | Show a map type selector that enables the viewer to switch between [map, satellite, hybrid, terrain]. When useMapTypeControl is false (default) no selector is presented and the type is determined by the mapType option. |
| zoomLevel | number | automatic | An integer indicating the initial zoom level of the map, where 0 is completely zoomed out (whole world) and 19 is the maximum zoom level. (See "Zoom Levels" in the Google Maps API.) |
Methods
| Method | Return Type | Description |
|---|---|---|
draw(data, options) |
none | Draws the map. |
getSelection() |
Array of selection elements | Standard getSelection() implementation. Selection elements are all row elements.
Can return more than one selected row. |
setSelection(selection) |
none | Standard setSelection() implementation.
Treats every selection entry as a row selection. Supports selection of multiple
rows. |
Events
| Name | Description | Properties |
|---|---|---|
error |
Fired when an error occurs when attempting to render the chart. | id, message |
select |
Standard select event | None |
Data Policy
Map are displayed by Google Maps. Please refer to the Google Maps Terms of Service for more information on data policy.