Visualization: Map
Page Summary
The Google Map Chart displays markers on a map using the Google Maps API, with data values being either coordinates (lat-long pairs) or addresses.
Locations can be identified by name or by latitude and longitude, with the latter loading faster for large datasets.
Markers can be customized using external images, and multiple sets of different markers can be added to the map.
The map appearance can be customized using custom map types and styles, with control over which map types are available to the user.
The map chart requires loading the "map" package and obtaining a
mapsApiKeyfor your project.
Overview
The Google Map Chart displays a map using theGoogleMaps API. Data values are displayed as markers on the map. Datavalues can be coordinates (lat-long pairs) or addresses. The map willbe scaled so that it includes all the identified points.
If you want your maps to be line drawings rather than satellite imagery, use ageochart instead.
Named Locations
You can identify the places to put markers by name, as shown belowin 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 theshowInfoWindow option. Also, when the user hovers over one of the markers for a short while, a 'title' tip will show up with the same info, because we used theshowTooltip option. Here's the full HTML:
<html><head><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script>google.charts.load('current',{'packages':['map'],//Note:youwillneedtogetamapsApiKeyforyourproject.//See:https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings'mapsApiKey':'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'});google.charts.setOnLoadCallback(drawMap);functiondrawMap(){vardata=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']]);varoptions={showTooltip:true,showInfoWindow:true};varmap=newgoogle.visualization.Map(document.getElementById('chart_div'));map.draw(data,options);};</script></head><body><divid="chart_div"></div></body></html>
Geocoded Locations
You can also specify locations by latitude and longitude, whichloads faster than named locations:
The above chart identifies four locations by latitude andlongitude.
vardata=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><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">google.charts.load("current",{"packages":["map"],//Note:youwillneedtogetamapsApiKeyforyourproject.//See:https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings"mapsApiKey":"AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"});google.charts.setOnLoadCallback(drawChart);functiondrawChart(){vardata=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']]);varmap=newgoogle.visualization.Map(document.getElementById('map_div'));map.draw(data,{showTooltip:true,showInfoWindow:true});}</script></head><body><divid="map_div"style="width: 400px; height: 300px"></div></body></html>
Customizing Markers
You can use marker shapes located elsewhere on the web. Here'san example using blue pins from iconarchive.com:
If you select pins in the above chart, they slant. PNGs, GIFs, andJPGs are supported.
varoptions={icons:{default:{normal:'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',selected:'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'}}};
<html><head><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">google.charts.load("current",{"packages":["map"],//Note:youwillneedtogetamapsApiKeyforyourproject.//See:https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings"mapsApiKey":"AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"});google.charts.setOnLoadCallback(drawChart);functiondrawChart(){vardata=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']]);varoptions={icons:{default:{normal:'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',selected:'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'}}};varmap=newgoogle.visualization.Map(document.getElementById('map_markers_div'));map.draw(data,options);}</script></head><body><divid="map_markers_div"style="width: 400px; height: 300px"></div></body></html>
Adding Multiple Marker Sets
In addition to creating a default set of markers, you can also create multiple sets of markers.
To create an additional marker set, add an ID to theicons option and set your marker images. Then, add a column to your Data Table, and set the ID of the marker set you wish to use for each row in the Data Table (you can also use'default' ornull to use the default markers).
varurl='https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';varoptions={zoomLevel:6,showTooltip:true,showInfoWindow:true,useMapTypeControl:true,icons:{blue:{normal:url+'Map-Marker-Ball-Azure-icon.png',selected:url+'Map-Marker-Ball-Right-Azure-icon.png'},green:{normal:url+'Map-Marker-Push-Pin-1-Chartreuse-icon.png',selected:url+'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'},pink:{normal:url+'Map-Marker-Ball-Pink-icon.png',selected:url+'Map-Marker-Ball-Right-Pink-icon.png'}}};
<html><head><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">google.charts.load('current',{'packages':['map'],//Note:youwillneedtogetamapsApiKeyforyourproject.//See:https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings'mapsApiKey':'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'});google.charts.setOnLoadCallback(drawMap);functiondrawMap(){vardata=newgoogle.visualization.DataTable();data.addColumn('string','Address');data.addColumn('string','Location');data.addColumn('string','Marker')data.addRows([['New York City NY, United States','New York','blue'],['Scranton PA, United States','Scranton','green'],['Washington DC, United States','Washington','pink'],['Philadelphia PA, United States','Philly','green'],['Pittsburgh PA, United States','Pittsburgh','green'],['Buffalo NY, United States','Buffalo','blue'],['Baltimore MD, United States','Baltimore','pink'],['Albany NY, United States','Albany','blue'],['Allentown PA, United States','Allentown','green']]);varurl='https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';varoptions={zoomLevel:6,showTooltip:true,showInfoWindow:true,useMapTypeControl:true,icons:{blue:{normal:url+'Map-Marker-Ball-Azure-icon.png',selected:url+'Map-Marker-Ball-Right-Azure-icon.png'},green:{normal:url+'Map-Marker-Push-Pin-1-Chartreuse-icon.png',selected:url+'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'},pink:{normal:url+'Map-Marker-Ball-Pink-icon.png',selected:url+'Map-Marker-Ball-Right-Pink-icon.png'}}};varmap=newgoogle.visualization.Map(document.getElementById('map_div'));map.draw(data,options);}</script></head><body><divid="map_div"style="height: 500px; width: 900px"></div></body></html>
Styling Maps
The Map Visualization comes with the ability to set custom styles, allowing you to create one, or several, custom map types.
You can define a custom map type by creating a map style object and putting it under its identifier (mapTypeId) under the maps option. For example:
var options = { maps: { <map style ID>: <map style object> } };You can later refer to this custom map type by the map style ID you assigned to it.
Your map style object contains aname, which will be the display name in the map type control (it does not have to match itsmapTypeId), and astyles array, which will contain style objects for each element you wish to style. TheGoogle Maps API reference contains a list of the different element, feature, and style types with which you can create a custom map type.
Note: Your custommapTypeId must be placed under themaps option.
varoptions={mapType:'styledMap',zoomLevel:12,showTooltip:true,showInfoWindow:true,useMapTypeControl:true,maps:{//YourcustommapTypeIdholdingcustommapstyles.styledMap:{name:'Styled Map',//Thisnamewillbedisplayedinthemaptypecontrol.styles:[{featureType:'poi.attraction',stylers:[{color:'#fce8b2'}]},{featureType:'road.highway',stylers:[{hue:'#0277bd'},{saturation:-50}]},{featureType:'road.highway',elementType:'labels.icon',stylers:[{hue:'#000'},{saturation:100},{lightness:50}]},{featureType:'landscape',stylers:[{hue:'#259b24'},{saturation:10},{lightness:-22}]}]}}};
<html><head><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">google.charts.load('current',{'packages':['map'],//Note:youwillneedtogetamapsApiKeyforyourproject.//See:https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings'mapsApiKey':'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'});google.charts.setOnLoadCallback(drawMap);functiondrawMap(){vardata=newgoogle.visualization.DataTable();data.addColumn('string','Address');data.addColumn('string','Location');data.addRows([['Lake Buena Vista, FL 32830, United States','Walt Disney World'],['6000 Universal Boulevard, Orlando, FL 32819, United States','Universal Studios'],['7007 Sea World Drive, Orlando, FL 32821, United States','Seaworld Orlando']]);varoptions={mapType:'styledMap',zoomLevel:12,showTooltip:true,showInfoWindow:true,useMapTypeControl:true,maps:{//YourcustommapTypeIdholdingcustommapstyles.styledMap:{name:'Styled Map',//Thisnamewillbedisplayedinthemaptypecontrol.styles:[{featureType:'poi.attraction',stylers:[{color:'#fce8b2'}]},{featureType:'road.highway',stylers:[{hue:'#0277bd'},{saturation:-50}]},{featureType:'road.highway',elementType:'labels.icon',stylers:[{hue:'#000'},{saturation:100},{lightness:50}]},{featureType:'landscape',stylers:[{hue:'#259b24'},{saturation:10},{lightness:-22}]}]}}};varmap=newgoogle.visualization.Map(document.getElementById('map_div'));map.draw(data,options);}</script></head><body><divid="map_div"style="height: 500px; width: 900px"></div></body></html>
In addition to creating custom map types, you can also specify which maps the user can view in the map type control with themapTypeIds option. By default all map types, including your custom map types, will appear in the map type control. ThemapTypeIds option accepts an array of strings of the map types you wish to allow the user to view. These strings must refer to either the predefined names for the default map styles (i.e. normal, satellite, terrain, hybrid), or the map style ID of a custom map type you defined. By setting themapTypeIds option, your map will only make available the map types you specify in this array.
You can also use this in conjunction with themapType option to set a map style as the default, but not include it in themapTypeIds array. This will cause that map to only display on the initial load.
varoptions={mapType:'styledMap',zoomLevel:7,showTooltip:true,showInfoWindow:true,useMapTypeControl:true,//Userwillonlybeabletoview/selectcustomstyledmaps.mapTypeIds:['styledMap','redEverything','imBlue'],maps:{styledMap:{name:'Styled Map',styles:[{featureType:'poi.attraction',stylers:[{color:'#fce8b2'}]},{featureType:'road.highway',stylers:[{hue:'#0277bd'},{saturation:-50}]},{featureType:'road.highway',elementType:'labels.icon',stylers:[{hue:'#000'},{saturation:100},{lightness:50}]},{featureType:'landscape',stylers:[{hue:'#259b24'},{saturation:10},{lightness:-22}]}]},redEverything:{name:'Redden All The Things',styles:[{featureType:'landscape',stylers:[{color:'#fde0dd'}]},{featureType:'road.highway',stylers:[{color:'#67000d'}]},{featureType:'road.highway',elementType:'labels',stylers:[{visibility:'off'}]},{featureType:'poi',stylers:[{hue:'#ff0000'},{saturation:50},{lightness:0}]},{featureType:'water',stylers:[{color:'#67000d'}]},{featureType:'transit.station.airport',stylers:[{color:'#ff0000'},{saturation:50},{lightness:-50}]}]},imBlue:{name:'All Your Blues are Belong to Us',styles:[{featureType:'landscape',stylers:[{color:'#c5cae9'}]},{featureType:'road.highway',stylers:[{color:'#023858'}]},{featureType:'road.highway',elementType:'labels',stylers:[{visibility:'off'}]},{featureType:'poi',stylers:[{hue:'#0000ff'},{saturation:50},{lightness:0}]},{featureType:'water',stylers:[{color:'#0288d1'}]},{featureType:'transit.station.airport',stylers:[{color:'#0000ff'},{saturation:50},{lightness:-50}]}]}}};
Loading
Thegoogle.charts.load package name is"map".
Note that you will need to get your ownmapsApiKey for your project, rather than just copying the one used in examples here, to avoid degredation of the map data service for your users. For more details, see Load Settings.
google.charts.load("current",{"packages":["map"],//Note:youwillneedtogetamapsApiKeyforyourproject.//See:https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings"mapsApiKey":"AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"});
The visualization's class name isgoogle.visualization.Map. Because the shortened name,Map, conflicts with the JavaScriptMap class, theChartWrapper will not automatically load this package when you specifychartType: 'Map'. But you can instead specifychartType: 'google.visualization.Map'.
varvisualization=newgoogle.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 visitGoogle 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 400will be shown.
Configuration Options
| Name | |
|---|---|
| enableScrollWheel | If set to true, enables zooming in and out using the mouse scroll wheel. Type: boolean Default: false |
| icons | Holds set(s) of custom markers. Each marker set can specify a var options = { icons: { default: { normal: '/path/to/marker/image', selected: '/path/to/marker/image' }, customMarker: { normal: '/path/to/other/marker/image', selected: '/path/to/other/marker/image' } }};Type: object Default: null |
| lineColor | If showLine is true, defines the line color. For example: '#800000'. Type: string Default: default color |
| lineWidth | If showLine is true, defines the line width (in pixels). Type: number Default: 10 |
| maps.<mapTypeId> | An object containing properties of a custom map type. This custom map type will be accessed by the
Type: object Default: null |
| maps.<mapTypeId>.name | The name of the map that will be displayed in the map control if Type: string Default: null |
| maps.<mapTypeId>.styles | Holds the style objects for the various elements of a custom map type. Each style object can contain 1 to 3 properties: { featureType: 'roadway.highway', elementType: 'labels.text.fill', stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]}See theMaps documentation for more information on the different features, elements, and stylers. Type: array Default: null |
| mapType | The type of map to show. Possible values are 'normal', 'terrain', 'satellite', 'hybrid', or the ID of a custom map type, if any were created. Type: string Default: 'hybrid' |
| mapTypeIds | If using the map type control ( Type: array Default: null |
| showInfoWindow | If set to true, shows the location description in a separate window when a point marker is selected by the user. This option used to be called Type: boolean Default: false |
| showLine | If set to true, shows aGoogle Maps polyline through all the points. Type: boolean Default: false |
| showTooltip | If set to true, shows the location description as a tooltip when the mouse is positioned above a point marker. This option used to be called Type: boolean Default: false |
| useMapTypeControl | 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. Type: boolean Default: false |
| zoomLevel | 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.) Type: number Default: automatic |
Methods
| Method | |
|---|---|
draw(data, options) | Draws the map. Return Type: none |
getSelection() | Standard Return Type: Array of selection elements |
setSelection(selection) | Standard Return Type: none |
Events
| Name | |
|---|---|
error | Fired when an error occurs when attempting to render the chart. Properties: id, message |
select | Standard select event Properties: None |
Data Policy
Map are displayed by Google Maps.Please refer to theGoogle Maps Terms of Servicefor more information on data policy.
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-10 UTC.