圖表：地圖

  1. 總覽
  2. 指定位置
  3. 地理代碼位置
  4. 自訂標記
  5. 新增多個標記集
  6. 設定地圖樣式
  7. 載入中
  8. 資料格式
  9. 設定選項
  10. 方法
  11. 事件
  12. 資料政策

簡介

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
<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
<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
<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
<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);

資料格式

系統支援兩種替代資料格式：

  1. 成對的長邊組合 - 前兩欄分別應分別指定緯度和經度的數字。第三個第三個資料欄可填入字串，說明前兩欄中指定的位置。
  2. 字串地址 - 第一欄應為包含地址的字串。這個地址必須盡可能完整。選擇性的第二欄含有字串，用來說明第一個資料欄中的位置。字串位址的載入速度較慢，尤其是 10 個以上的地址時。

注意：拉長長組選項能夠更快載入地圖，對於大型資料而言尤其如此。建議您針對大型資料集使用這個選項。請造訪 Google Maps API，瞭解如何將地址轉換成經緯度的範例點。地圖最多可顯示 400 個項目；如果您的資料包含超過 400 列，則只會顯示前 400 列。

設定選項

名稱
enableScrollWheel

如果設為 True，則會使用滑鼠滾輪啟用縮放功能。

類型：布林值
預設值：false
圖示

保留自訂標記集。每個標記集都可以指定 normal 和 selected 標記圖片。您可以設定 default 選項來進行預設設定，也可以設定專屬的標記 ID 來自訂標記集。

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>

包含自訂地圖類型屬性的物件。您為自訂地圖類型指定的 mapTypeId 可存取此自訂地圖類型。您必須為建立的每個自訂地圖類型提供新的 mapTypeId。每個自訂地圖類型都應包含兩個屬性：

  • name：樣式地圖類型的顯示名稱
  • style：包含樣式化地圖類型樣式物件的物件的陣列
類型：物件
預設值：空值
maps.<mapTypeId>.name

如果 useMapTypeControl 設為 true，則地圖控制項中顯示的地圖名稱。

類型：字串
預設值：空值
maps.<mapTypeId>.styles

會保留自訂地圖類型各種元素的樣式物件。

每個樣式物件可包含 1 到 3 個屬性：featureType、elementType 和 stylers。如果省略 featureType 和 elementType，樣式將套用到所有地圖功能/元素。 

{
  featureType: 'roadway.highway',
  elementType: 'labels.text.fill',
  stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}

如要進一步瞭解不同的功能、元素和樣式工具，請參閱地圖說明文件。

類型：陣列
預設值：空值
mapType

要顯示的地圖類型。可能的值包括「normal」、「地形」、「衛星」、「混合」或自訂地圖類型的 ID (如果有的話)。

類型：字串
預設值：「hybrid」
mapTypeIds

如果使用地圖類型控制項 (useMapTypeControl: true)，則此陣列中指定的 ID 會是地圖類型控制項中唯一顯示的地圖類型。如未設定這個選項，地圖類型控制項會預設為標準 Google 地圖地圖類型控制項選項，以及任何可用的自訂地圖類型。

類型：陣列
預設值：空值
節目資訊視窗

如果設為 true，當使用者選取點標記時，系統會在另一個視窗中顯示位置說明。在 45 版本之前，這個選項過去稱為 showTip。另請參閱 showTooltip 的說明

類型：布林值
預設值：false
節目線

如果設為 true，則會顯示所有點的 Google 地圖折線。

類型：布林值
預設值：false
節目工具提示

如果設為 true，當滑鼠位於點標記上方時，將位置說明顯示為工具提示。在 45 版本之前，這個選項過去稱為 showTip。請注意，系統目前不支援 HTML，因此工具提示會顯示原始 HTML 標記。

類型：布林值
預設值：false
使用 ControlControl

顯示地圖類型選取器，讓觀眾可切換 [地圖、衛星、混合、地形]。當 useGeoControl 為 false (預設) 時，系統不會顯示任何選取器，而且該類型是由 mapType 選項決定。

類型：布林值
預設值：false
zoomLevel

用來表示地圖初始縮放等級的整數，其中 0 表示完全縮小 (全世界)，19 則是最大縮放等級。(請參閱 Google Maps API 中的「縮放等級」一節)。

類型：數字
預設：自動

方法

方法
draw(data, options)

繪製地圖。

傳回類型：無
getSelection()

標準 getSelection() 實作。選取元素皆為所有列元素。 可傳回多個所選列。

傳回類型：選取元素陣列
setSelection(selection)

標準 setSelection() 實作。將每個選取項目視為資料列選取項目。支援選取多個資料列。

傳回類型：無

活動

名稱
error

嘗試轉譯圖表時發生錯誤。

屬性：ID、訊息
select

標準選取事件

屬性：無

資料政策

「Google 地圖」會顯示地圖。如要進一步瞭解資料政策，請參閱《Google 地圖服務條款》。