Click here to see your recently viewed pages and most viewed pages.
Hide

Visualization: Map

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.

Data
  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']
  ]);
Full HTML
<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.

Data
  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'
      }
    }
  };
Full HTML
<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>

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 the icons 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' or null to use the default markers).

Options
      var url = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTip: 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'
          }
        }
      };
    
Full HTML
<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['map']});
    google.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.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']
      ]);
      var url = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTip: 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'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="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 a name, which will be the display name in the map type control (it does not have to match its mapTypeId), and a styles array, which will contain style objects for each element you wish to style. The Google 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 custom mapTypeId must be placed under the maps option.

Options
      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTip: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            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}]
              }
        ]}}
      };
Full HTML
<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['map']});
    google.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.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' ]
      ]);

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTip: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            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}]
              }
        ]}}
      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
<div id="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 the mapTypeIds option. By default all map types, including your custom map types, will appear in the map type control. The mapTypeIds 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 the mapTypeIds option, your map will only make available the map types you specify in this array.

You can also use this in conjunction with the mapType option to set a map style as the default, but not include it in the mapTypeIds array. This will cause that map to only display on the initial load.

      var options = {
        mapType: 'styledMap',
        zoomLevel: 7,
        showTip: true,
        useMapTypeControl: true,
        // User will only be able to view/select custom styled maps.
        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

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:

  1. 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.
  2. 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.
icons object null Holds set(s) of custom markers. Each marker set can specify a normal and selected marker image. Can set a default set by setting the default option, or custom marker sets by setting a unique marker ID.
        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'
            }
          }
        };
      
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).
maps.<mapTypeId> object null An object containing properties of a custom map type. This custom map type will be accessed by the mapTypeId you specify for the custom map type. A new mapTypeId must be given for each custom map type created. Each custom map type should contain two properties:
  • name: The display name for the styled map type
  • styles: An array containing the style objects for the styled map type
maps.<mapTypeId>.name string null The name of the map that will be displayed in the map control if useMapTypeControl is set to true.
maps.<mapTypeId>.styles array null

Holds the style objects for the various elements of a custom map type.

Each style object can contain 1 to 3 properties: featureType, elementType, and stylers. If featureType and elementType are omitted, the styles will be applied to all map features/elements.

        {
          featureType: 'roadway.highway',
          elementType: 'labels.text.fill',
          stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
        }
      

See the Maps documentation for more information on the different features, elements, and stylers.

mapType string 'hybrid' 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.
mapTypeIds array null If using the map type control (useMapTypeControl: true), the IDs specified in this array will be the only map types displayed in the map type control. If this option is not set, the map type control will default to the standard Google Maps map type control options plus any custom map types that may be available.
showLine boolean false If set to true, shows a Google Maps polyline through all the points.
showTip boolean false If set to true, shows the location description as a tooltip when the mouse is positioned above a point marker.
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.