概要
地図は、国、大陸、地域マップの地図で、色と値が特定のリージョンに割り当てられています。値はカラースケールとして表示され、地域のオプションのホバーテキストを指定できます。地図は埋め込み Flash プレーヤーを使用してブラウザ内でレンダリングされます。地図はスクロールやドラッグはできませんが、ズームを許可するように構成できます。
例
次の 2 つの例は、領域の表示スタイルを使用するものと、マーカーの表示スタイルを使用するものです。
地域の例
地域スタイルは、地域全体（通常は国）を割り当てた値に対応する色で塗りつぶします。コードで options['dataMode']
= 'regions' を割り当てて、地域のスタイルを指定します。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geomap'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
マーカーの例
「マーカー」スタイルでは、指定した領域にわたって、値を示す円とサイズ、色が表示されます。
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geomap']});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['New York', 200],
['Boston', 300],
['Miami', 400],
['Chicago', 500],
['Los Angeles', 600],
['Houston', 700]
]);
var options = {};
options['region'] = 'US';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = 'markers';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
読み込み中
google.charts.load のパッケージ名は "geomap" です
google.charts.load('current', {'packages': ['geomap']});
地図ビジュアリゼーションのクラス名は google.visualization.GeoMap です
var visualization = new google.visualization.GeoMap(container);
データ形式
2 つのアドレス形式がサポートされ、それぞれで異なる数の列をサポートし、列ごとに異なるデータ型がサポートされています。テーブル内のすべてのアドレスは、いずれか一方を使用する必要があります。タイプを組み合わせることはできません。
- 形式 1: 緯度 / 経度の場所。この形式は、
dataModeオプションが「マーカー」の場合にのみ機能します。この形式を使用する場合は、Google マップの JavaScript を含める必要はありません。ロケーションを 2 つの列と、省略可能な 2 つの列に入力します。- [数値、必須] 緯度。正の数値は北、負の数値は南を表します。
- [数値、必須] 経度。正の数値は東部、負の数値は西です。
- [数値、省略可] ユーザーがこの地域にカーソルを合わせたときに表示される数値。4 列目を使用する場合は必須。
- [文字列、省略可] ユーザーがこのリージョンにカーソルを合わせたときに表示される追加の文字列テキスト。
- 形式 2: 住所、国名、地域名、米国の大都市圏の市外局番この形式は、「markers」または「regions」に設定された
dataModeオプションで機能します。場所は、1 列とオプションの 2 列に入力します。- [文字列、必須] 地図上の場所。次の形式を使用できます。
- 特定の住所（「1600 Pennsylvania Ave」など）。
- 国名（例: 「イギリス」）、または大文字の ISO-3166 コード、またはそれに相当する英語のテキスト（「GB」や「英国」など）。
- ISO-3166-2 大文字の地域コードネームまたはそれに相当する英語のテキスト（例: 「US-NJ」または「ニュージャージー」）。注: リージョンは、dataMode オプションが「regions」に設定されている場合にのみ指定できます。
- 大都市圏の市外局番。これらは、さまざまな地域を指定するために使用される 3 桁の大都市圏コードです。米国のコードのみがサポートされています。電話番号の市外局番と同じではありません。
- [数値、省略可] ユーザーがこの地域にカーソルを合わせたときに表示される数値。3 列目を使用する場合は必須。
- [文字列、省略可] ユーザーがこのリージョンにカーソルを合わせたときに表示される追加の文字列テキスト。
- [文字列、必須] 地図上の場所。次の形式を使用できます。
注: 地図には最大 400 のエントリを表示できます。DataTable または DataView に 400 行を超えるデータがある場合は、最初の 400 行のみが表示されます。最速モードは、ISO コードとして指定された地域を持つ dataMode='regions' と、緯度 / 経度の dataMode='markers' です。最も遅いモードは、文字列アドレスを含む dataMode='markers' です。
重要: DataTable には、使用する列の前にオプションの列をすべて含める必要があります。たとえば、緯度/経度テーブルを指定して、列 1、2、4 のみを使用する場合は、DataTable で列 3 を定義する必要があります（ただし、値を追加する必要はありません）。
dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');
dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");
構成オプション
| 名前 | タイプ | Default | 説明 |
|---|---|---|---|
region |
文字列 | 「世界」 | 地図に表示するエリア。（サラウンド領域も表示されます）。国コード（ISO-3166 形式）または次のいずれかの文字列を指定します。
ジオマップでは、スクロールまたはドラッグの動作は有効ではなく、ズーム動作は限定されています。基本的なズームアウトは、 |
dataMode |
文字列 | 「regions」 | マップ上に値を表示する方法。次の 2 つの値がサポートされます。 |
width |
文字列 | 556 ピクセル | ビジュアリゼーションの幅。単位を指定しない場合、デフォルトの単位はピクセルです。 |
height |
文字列 | 「347 ピクセル」 | ビジュアリゼーションの高さ。単位を指定しない場合、デフォルトの単位はピクセルです。 |
colors |
0xRRGGBB 形式の RGB 値の配列 | [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] | ビジュアリゼーション内の値に割り当てる色のグラデーション。少なくとも 2 つの値が必要です。グラデーションにはすべての値と計算された中間値が含まれ、最も明るい色が最小値、最も暗い色が最も高い値になります。 |
showLegend |
boolean | true | true の場合、地図の凡例が表示されます。 |
showZoomOut |
boolean | false | true の場合、zoomOutLabel プロパティで指定されたラベルのボタンを表示します。このボタンをクリックしたときには何もしません。ただし、zoomOut イベントをスローする点が異なります。ズームを処理するには、このイベントをキャッチして region オプションを変更します。showZoomOut を指定できるのは、region オプションがワールドビューよりも小さい場合のみです。ズームイン動作を有効にする 1 つの方法は、regionClick イベントをリッスンし、region プロパティを適切なリージョンに変更して、地図を再読み込みすることです。 |
zoomOutLabel |
文字列 | 「ズームアウト」 | ズームボタンのラベル。 |
メソッド
| メソッド | 戻り値の型 | 説明 |
|---|---|---|
draw(data, options) |
なし | 地図を描画します。描画が完了する前に戻ることができます（drawingDone() イベントを参照）。 |
getSelection() |
選択要素の配列 | 標準の getSelection() 実装。選択した要素は行です。この方法は、dataMode オプションが「リージョン」の場合にのみ機能します。値が割り当てられているリージョンのみ選択できます。 |
setSelection(selection) |
なし | 標準の setSelection() 実装。選択を行の選択として扱い、複数の行の選択をサポートします。値が割り当てられているリージョンのみ選択できます。 |
イベント
| 名前 | 説明 | プロパティ |
|---|---|---|
error |
グラフのレンダリング中にエラーが発生しました。 | id、message |
select |
値が割り当てられたリージョンをユーザーがクリックすると呼び出されます。選択内容を確認するには、 注: 特定の制限により、ブラウザでファイルにアクセスしてファイルにアクセスした場合、 |
なし |
regionClick |
リージョンがクリックされたときに呼び出されます。「地域」と「マーカー」の両方で機能します。 注: 特定の制限により、ブラウザ内のページにファイルとしてアクセスする場合、 |
単一のプロパティ region を持つオブジェクト。クリックされた地域を示す ISO-3166 形式の文字列です。 |
zoomOut |
ズームアウト ボタンがクリックされたときに呼び出されます。ズームを処理するには、このイベントをキャッチして 注: 特定の制限により、ブラウザでファイルにアクセスしてファイルにアクセスした場合、 |
なし |
drawingDone |
地図の描画が完了したときに呼び出されます。 | なし |
データポリシー
地域は Google マップでジオコーディングされます。ジオコーディングを必要としないデータはサーバーに送信されません。 データポリシーについて詳しくは、Google マップの利用規約をご覧ください。
注意事項
Flash セキュリティ設定により、ウェブサーバーの URL（例: http://www.myhost.com/myviz.html）ではなく、ブラウザのファイルの場所（file:///c:/webhost/myhost/myviz.html など）からアクセスした場合、正しく動作しないことがあります。これは通常、テストに関する問題のみです。この問題は、Macromedia のウェブサイトで解決できます。