Visualization: Map

Overview

Displays a map using the Google Maps API. Data values are displayed as points on the map. Data values can be coordinates (Lat-Long pairs) or addresses.

By: Google

Example

This example combines a map and a table visualization.

Shopping

	Lat	Lon	Name
1	37.4232	-122.0853	Work
2	37.4289	-122.1697	University
3	37.6153	-122.39	Airport
4	37.4422	-122.1731	Shopping

<html>
  <head>
    <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:["map"]});
       google.setOnLoadCallback(drawMap);
      function drawMap() {
         var data = new google.visualization.DataTable();
         data.addColumn('number', 'Lat');
         data.addColumn('number', 'Lon');
         data.addColumn('string', 'Name');
         data.addRows(4);
        data.setCell(0, 0, 37.4232);
         data.setCell(0, 1, -122.0853);
         data.setCell(0, 2, 'Work');
         data.setCell(1, 0, 37.4289);
         data.setCell(1, 1, -122.1697);
         data.setCell(1, 2, 'University');
         data.setCell(2, 0, 37.6153);
         data.setCell(2, 1, -122.3900);
         data.setCell(2, 2, 'Airport');
         data.setCell(3, 0, 37.4422);
         data.setCell(3, 1, -122.1731);
         data.setCell(3, 2, '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>

Note that you need to replace the key ABCDEFG with your Maps API key. Sign up for a Maps API key

Loading

The google.load package name is "map"

You will also need to include the Google Maps API, configured with your API key.

  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.

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.

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', 'satellite' or 'hybrid'.
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
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.

Просто заметки

пятница, 12 февраля 2010 г.