簡介
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 地圖服務條款》。