概要
Google マップグラフは、Google Maps API を使用して地図を表示します。データ値は、地図上にマーカーとして表示されます。データ値は座標（経度と緯度のペア）または住所です。指定されたすべてのポイントを含むように地図が拡大縮小されます。
地図を衛星画像ではなく線画にする場合は、代わりにジオチャートを使用します。
名前のついた場所
以下の図は、人口の上位 10 か国の地図で示されているように、名前でマーカーを配置する場所を表しています。
ユーザーがマーカーの 1 つを選択すると、国の名前と人口が含まれるツールチップが表示されます。これは、showInfoWindow オプションを使用したためです。また、ユーザーがマーカーの 1 つに一時的にカーソルを合わせると、「showTooltip」オプションを使用したため、「タイトル」のヒントも同じ情報で表示されます。HTML の全文は次のとおりです。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['map'],
// 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', '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 = {
showTooltip: true,
showInfoWindow: 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>
ジオコーディングされた地域
緯度と経度でロケーションを指定することもできます。この場合、指定したロケーションよりも高速に読み込まれます。
上のグラフは、緯度と経度で 4 つの場所を特定しています。
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']
]);
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(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, {
showTooltip: true,
showInfoWindow: true
});
}
</script>
</head>
<body>
<div id="map_div" style="width: 400px; height: 300px"></div>
</body>
</html>
マーカーのカスタマイズ
マーカーは、ウェブ上の他の場所に配置することもできます。以下に、iconarchive.com の青いピンを使用した例を示します。
上のグラフでピンを選択すると、そのピンが傾きます。PNG、GIF、JPG がサポートされています。
var options = {
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>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(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: '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'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_markers_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_markers_div" style="width: 400px; height: 300px"></div>
</body>
</html>
複数のマーカー セットを追加する
デフォルトのマーカー セットに加えて、複数のマーカー セットを作成することもできます。
追加のマーカー セットを作成するには、icons オプションに ID を追加して、マーカー画像を設定します。次に、データテーブルに列を追加し、データテーブルの各行に使用するマーカーセットの ID を設定します（'default' または null を使用してデフォルトのマーカーを使用することもできます）。
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
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>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = 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 = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
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'
}
}
};
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>
マップのスタイル設定
地図のビジュアリゼーションには、カスタム スタイルを設定する機能があり、1 つまたは複数のカスタム マップタイプを作成できます。
カスタムの地図タイプを定義するには、地図のスタイル オブジェクトを作成し、地図のオプションで ID（mapTypeId）の下に配置します。次に例を示します。
var options = {
maps: {
<map style ID>: <map style object>
}
};
カスタムのマップタイプは、割り当てたマップスタイル ID で後で参照できます。
地図のスタイル オブジェクトには、地図タイプのコントロールの表示名（mapTypeId と一致させる必要はありません）と、スタイルを設定する各要素のスタイル オブジェクトを含む styles の配列が含まれます。nameGoogle Maps API リファレンスには、カスタムのマップタイプを作成するための各種要素、対象物、スタイルタイプのリストが含まれています。
注: カスタム mapTypeId は maps オプションの下に配置する必要があります。
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: 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}]
}
]}}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = 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,
showTooltip: true,
showInfoWindow: 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>
カスタムのマップタイプを作成するだけでなく、マップタイプ コントロールで、ユーザーが表示できるマップを mapTypeIds オプションで指定できます。デフォルトでは、カスタムのマップタイプを含むすべてのマップタイプが、マップタイプのコントロールに表示されます。mapTypeIds オプションは、ユーザーに表示を許可するマップタイプの文字列の配列を受け入れます。これらの文字列は、デフォルトの地図スタイル（法線、衛星、地形、ハイブリッド）の事前定義された名前、または定義したカスタムのマップタイプのマップ スタイル ID のいずれかを参照する必要があります。mapTypeIds オプションを設定すると、この配列で指定したマップタイプのみが地図で利用可能になります。
また、このオプションを mapType オプションと組み合わせて使用すると、地図のスタイルをデフォルトに設定できますが、mapTypeIds 配列に含めないでください。これにより、その地図は初期読み込み時にのみ表示されます。
var options = {
mapType: 'styledMap',
zoomLevel: 7,
showTooltip: true,
showInfoWindow: 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}]}
]}
}
};
読み込み中
google.charts.load パッケージ名は "map" です。
ここで示した例で使用されているものをそのままコピーするのではなく、プロジェクト用に独自のmapsApiKeyを取得する必要があります。詳細については、読み込み設定をご覧ください。
google.charts.load("current", {
"packages":["map"],
// 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.visualization.Map です。短縮された名前（Map）は JavaScript Map クラスと競合するため、chartType: 'Map' を指定しても、ChartWrapper はこのパッケージを自動的に読み込みません。代わりに chartType: 'google.visualization.Map' を指定することもできます。
var visualization = new google.visualization.Map(container);
データ形式
次の 2 つの代替データ形式がサポートされています。
- 緯度 / 経度ペア - 最初の 2 列は、それぞれ経度と緯度を示す数値にする必要があります。オプションの 3 番目の列には、最初の 2 つの列で指定された場所を表す文字列が入ります。
- String address - 最初の列は、アドレスを含む文字列にします。この住所はできる限り完全なものにする必要があります。オプションの 2 番目の列には、最初の列の位置を表す文字列が入ります。文字列アドレスの読み込みは、特に住所が 10 を超えると遅くなります。
注: 緯度/経度のペアでは、特に大規模なデータの場合、地図の読み込みがはるかに速くなります。大規模なデータセットには、このオプションを使用することをおすすめします。住所を緯度経度地点に変換する方法については、Google Maps API をご覧ください。マップには、最大 400 個のエントリを表示できます。データが 400 行を超える場合、最初の 400 行のみが表示されます。
設定オプション
| 名前 | |
|---|---|
| enableScrollWheel |
true に設定すると、マウスのスクロール ホイールを使用したズームインとズームアウトが可能になります。 型: boolean
デフォルト: false
|
| アイコン |
一連のカスタム マーカーを保持します。各マーカー セットには、 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'
}
}
};タイプ: オブジェクト
デフォルト: null
|
| LineColor |
showLine が true の場合、線の色を定義します。例: 「#800000」。 型: string
デフォルト: デフォルトの色
|
| LineWidth |
showLine が true の場合、線の幅をピクセル単位で定義します。 タイプ: 数値
デフォルト: 10
|
| maps.<mapTypeId> |
カスタムのマップタイプのプロパティを含むオブジェクト。このカスタムのマップタイプには、カスタム マップタイプに指定した
タイプ: オブジェクト
デフォルト: null
|
| maps.<mapTypeId>.name |
型: string
デフォルト: null
|
| maps.<mapTypeId>.styles |
カスタムのマップタイプのさまざまな要素のスタイル オブジェクトを保持します。
各スタイル オブジェクトには {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}各種の対象物、要素、スタイラの詳細については、マップのドキュメントをご覧ください。 タイプ: 配列
デフォルト: null
|
| mapType |
表示する地図の種類。有効な値は、「normal」、「terrain」、「satellite」、「hybrid」、カスタムマップタイプの ID（存在する場合）です。 型: string
デフォルト: 'hybrid'
|
| mapTypeId |
地図タイプのコントロール（ タイプ: 配列
デフォルト: null
|
| 情報ウィンドウ |
true に設定すると、ユーザーがポイント マーカーを選択したときに、場所の説明が別のウィンドウに表示されます。このオプションは、バージョン 45 まで 型: boolean
デフォルト: false
|
| ショーライン |
true に設定すると、すべての地点を通る Google マップのポリラインが表示されます。 型: boolean
デフォルト: false
|
| ツールチップを表示 |
true に設定すると、マウスがポイント マーカーの上に配置されたときに、位置の説明がツールチップとして表示されます。このオプションは、バージョン 45 まで 型: boolean
デフォルト: false
|
| useMapTypeControl を使用する |
ユーザーが [地図、衛星、ハイブリッド、地形] を切り替えられるようにする地図タイプのセレクタを表示する。useMapTypeControl を false に設定する（デフォルト）場合、セレクタは表示されず、タイプは mapType オプションによって決まります。 型: boolean
デフォルト: false
|
| zoomLevel |
地図の最初のズームレベルを示す整数。0 は完全にズームアウトし（世界全体）、19 は最大ズームレベルです。（Google Maps API のズームレベルをご覧ください）。 タイプ: 数値
デフォルト: 自動
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
地図を描画します。 戻り値の型: なし
|
getSelection() |
標準の 戻り値の型: 選択要素の配列
|
setSelection(selection) |
標準の 戻り値の型: なし
|
イベント
| 名前 | |
|---|---|
error |
グラフのレンダリング中にエラーが発生しました。 プロパティ: ID、メッセージ
|
select |
標準の選定イベント プロパティ: なし
|
データポリシー
地図は Google マップに表示されます。データポリシーについて詳しくは、Google マップの利用規約をご覧ください。