簡介
Google 地圖圖表使用 Google Maps API 顯示地圖。資料值將在地圖上顯示為標記。資料值可以是座標 (經緯度) 或地址。系統會將地圖進行縮放，以涵蓋所有識別點。
如果您希望地圖是線條繪製而非衛星圖像，請改用地理圖。
指定位置
您可以依名稱尋找要放置標記的位置，以下將依照人口數最高的前十個國家/地區地圖顯示下圖。
當使用者選取其中一個標記時，我們會顯示包含國家/地區和人口名稱的工具提示，這是因為我們使用了 showInfoWindow 選項。此外，當使用者將滑鼠遊標懸停在任一標記上一陣子時，由於系統會使用 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>
地理代碼的位置
您也可以依緯度和經度指定位置，而載入速度比命名位置快：
上圖依據經緯度標示了四個位置。
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>
新增多個標記集
除了建立一組預設標記之外，您也可以建立多組標記。
如要建立其他標記集，請將 ID 新增至 icons 選項並設定標記圖片。接著，在您的資料表中新增資料欄，並設定您要在資料表中各列使用的標記組合 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>
設定地圖樣式
地圖視覺化功能可讓您設定自訂樣式，讓您建立一或多種自訂地圖類型。
您可以先建立地圖樣式物件，並將它放在地圖選項下的識別碼 (mapTypeId) 下，藉此定義自訂地圖類型。範例如下：
var options = {
maps: {
<map style ID>: <map style object>
}
};
日後，您可以依照指派給該地圖樣式 ID 參照此自訂地圖類型。
您的地圖樣式物件包含 name，這將會是地圖類型控制項中的顯示名稱 (不一定與 mapTypeId 相符)，以及 styles 陣列，其中包含您要設定樣式的每個元素的樣式物件。Google 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);
資料格式
系統支援兩種替代資料格式：
- 成對的長邊組合 - 前兩欄分別應分別指定緯度和經度的數字。第三個第三個資料欄可填入字串，說明前兩欄中指定的位置。
- 字串地址 - 第一欄應為包含地址的字串。這個地址必須盡可能完整。選擇性的第二欄含有字串，用來說明第一個資料欄中的位置。字串位址的載入速度較慢，尤其是 10 個以上的地址時。
注意：拉長長組選項能夠更快載入地圖，對於大型資料而言尤其如此。建議您針對大型資料集使用這個選項。請造訪 Google Maps API，瞭解如何將地址轉換成經緯度的範例點。地圖最多可顯示 400 個項目；如果您的資料包含超過 400 列，則只會顯示前 400 列。
設定選項
| 名稱 | |
|---|---|
| enableScrollWheel |
如果設為 True，則會使用滑鼠滾輪啟用縮放功能。 類型：布林值
預設值：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'
}
}
};
類型：物件
預設值：空值
|
| 線條顏色 |
如果 ShowLine 為 true，請定義線條顏色。例如：「#800000」。 類型：字串
預設：預設顏色
|
| 線條寬度 |
如果 ShowLine 為 true，請定義線條寬度 (以像素為單位)。 類型：數字
預設：10 個
|
| maps.<mapTypeId> |
包含自訂地圖類型屬性的物件。您為自訂地圖類型指定的
類型：物件
預設值：空值
|
| maps.<mapTypeId>.name |
如果 類型：字串
預設值：空值
|
| maps.<mapTypeId>.styles |
會保留自訂地圖類型各種元素的樣式物件。
每個樣式物件可包含 1 到 3 個屬性： {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
如要進一步瞭解不同的功能、元素和樣式工具，請參閱地圖說明文件。 類型：陣列
預設值：空值
|
| mapType |
要顯示的地圖類型。可能的值包括「normal」、「地形」、「衛星」、「混合」或自訂地圖類型的 ID (如果有的話)。 類型：字串
預設值：「hybrid」
|
| mapTypeIds |
如果使用地圖類型控制項 ( 類型：陣列
預設值：空值
|
| 節目資訊視窗 |
如果設為 true，當使用者選取點標記時，系統會在另一個視窗中顯示位置說明。在 45 版本之前，這個選項過去稱為 類型：布林值
預設值：false
|
| 節目線 |
如果設為 true，則會顯示所有點的 Google 地圖折線。 類型：布林值
預設值：false
|
| 節目工具提示 |
如果設為 true，當滑鼠位於點標記上方時，將位置說明顯示為工具提示。在 45 版本之前，這個選項過去稱為 類型：布林值
預設值：false
|
| 使用 ControlControl |
顯示地圖類型選取器，讓觀眾可切換 [地圖、衛星、混合、地形]。當 useGeoControl 為 false (預設) 時，系統不會顯示任何選取器，而且該類型是由 mapType 選項決定。 類型：布林值
預設值：false
|
| zoomLevel |
用來表示地圖初始縮放等級的整數，其中 0 表示完全縮小 (全世界)，19 則是最大縮放等級。(請參閱 Google Maps API 中的「縮放等級」一節)。 類型：數字
預設：自動
|
方法
| 方法 | |
|---|---|
draw(data, options) |
繪製地圖。 傳回類型：無
|
getSelection() |
標準 傳回類型：選取元素陣列
|
setSelection(selection) |
標準 傳回類型：無
|
活動
| 名稱 | |
|---|---|
error |
嘗試轉譯圖表時發生錯誤。 屬性：ID、訊息
|
select |
標準選取事件 屬性：無
|
資料政策
「Google 地圖」會顯示地圖。如要進一步瞭解資料政策，請參閱《Google 地圖服務條款》。