The only key difference between geomap and geochart visualizations is the method used to render the actual drawing of the map. Any other differences stem from the difference in rendering techniques. geomap uses Adobe Flash, which is quick to implement but lacks certain configuration options. geochart is rendered in VML (Vector Markup Language) or SVG (Scalable Vector Graphics), which allows for more detailed configurations. Finally, geochart (but not geomap) is also available as a chart option in Google Spreadsheets. These differences are generally due to the fact that geochart is the newer version although geomap has not yet been depreciated. Regardless, HTML5 or CSS3 geochart is the preferred choice over the older Flash version.

The frameworks of both geochart and geomap are also very similar to each other. Both visualizations have two modes of display, regions and markers. (The auto setting will select which of the two is the best fit for the data.) The regions setting displays data associated with cities, states, or countries as a color gradient in the shape of the state. The selection of the color for each state or country is determined by the value of the associated data. In the following example, higher data numbers correspond to darker blue states, while lighter blue indicates lower numbers.

The region option

The marker mode displays the same quantitative data as the region option. However, quantity is visualized through the diameter of each marker point in addition to data-related color variations. For a geochart with a number of marker points in a small geographical area, enable the magnifyingGlass option as part of the draw method's options.

The marker option

Both the region and marker versions of the map are interactive. Hovering over an item on either chart will activate a pop-up window with detailed information.

Basic geochart data formatting consists of two columns. The first column lists geographical locations and the second associates a data value with the corresponding location in each row. In the column of locations, each location should be of the same type. For example, United States and France are countries and are thus of the same type. A mismatch of type would be a data column that lists North America and Mexico City, as one is a continent and the other is a city. To define the geographic scope of a geochart, there are several configuration requirements that must be set.

Setting requirements for geochart:

The region option will set the overall scope for the map. Regions are the larger of the two settings, and will have a value of world, or a specific continent, country, state, or province as identified by the ISO 3166 global naming standard. The resolution setting then defines the granularity of the specified region. The available options for the resolution setting are countries, provinces, or metros. Note that, depending on the region selected, certain options may not be available as resolutions. However, resolutions follow the same ISO 3166 global naming standard as regions.

Spreadsheets

The geochart visualization is available as a chart option in the Google Spreadsheets Chart Editor. To use geochart, the first column in the spreadsheet must contain geographical information, such as the names of countries or states. The second column must contain numerical values related to the geographic names listed in the first column.

Tip

geochart in Spreadsheets – limitation

The Spreadsheets version of geochart only allows for a single column of data (beyond the region column). To use more columns in the visualization, create geochart using the code method.

Note

Source: factfinder2.census.gov

In the preceding example, the second column holds the combined population of two familiar Chicago Census age groups, 20-24 years and 25-29 years. The additional functionality of the spreadsheet is used here to convert raw numbers into the desired values to be displayed. In this case, the desired metric is the total population of people between ages 20 and 30 years who reside in a selected group of U.S. The chart range is set to only visualize the first two columns, which results in the visualization of the combination of the raw values.

// Set to: auto / regions / markers
displayMode: 'regions',  
// Set to: countries / provinces / metros
resolution: 'provinces',

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; 
  charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" 
  src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['geochart']});
    
    function drawVisualization() {
      // Import data from the Spreadsheets example of Geochart
      var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheet/
      pub?key=0AhnmGz1SteeGdHFQOUx5amozd1NxeGM4MXhwQ1BMdGc&single=
      true&gid=0&range=Sheet1!A2%3AB12&output=html'),
      
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
    
    // Query handling for the Spreadsheet data
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + 
        response.getDetailedMessage());
        return;
      }
      // Put the data from the Spreadsheet in the 'data' variable
      var data = response.getDataTable(); 
      
      options = {region: 'US', 
      displayMode: 'regions', 
      // Note 'provinces' means states for USAresolution: 'provinces',
      // Set color gradientcolorAxis: {colors: ['#ADC2EB','#000046']},width: 556, height: 347,
      // Set mouseover tooltip colortooltip: {textStyle: {color: '#FF6633'}, 
      showColorCode: true},
    }; 
    
    var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
      
      geochart.draw(data, options);
    }
    
    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>

As the predecessor to geochart, geomap inherently has fewer opportunities for customization. This is largely due to the fact that the graphic rendering process is handled by Adobe Flash. The geomap visualization, however, has its usages. For example, as a Flash file, geomap is compatible with any browser that supports Flash. If for some reason a browser does not support or has trouble reconciling VML or SVG, the visualization cannot run. The Flash format also requires fewer variables to be set, as the resolution variable is automatically configured based on the region setting.

The following screenshot shows the geomap visualization in the marker mode:

var options = {
  dataMode: 'markers', region: 'US', 
  colors: ['0xADC2EB','0x000046'] 
};
  var geomap = new google.visualization.GeoMap(
  document.getElementById('visualization'));
  geomap.draw(data, options);

geochart and geomap are not intended to be overly sophisticated visualizations, and do not therefore provide the detail of control available in the Google Map API. In the Map API, layers are introduced as a method for creating heat maps, outlined areas, elevation visualizations, overlays, and other data-rich options for maps. An in-depth exploration of the Map API is out of the scope of this book, but it is mentioned here to highlight the importance of knowing the strengths and weaknesses between similar functionality in different APIs. The Visualization API can also be thought of as a jumping off point for learning the Maps API, as frameworks' elements such as getID, listeners, button on-click messages, and other features are often the same between the Google APIs.