圖表:地圖

簡介

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
圖示

保留自訂標記集。每個標記集都可以指定 normalselected 標記圖片。您可以設定 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 個屬性:featureTypeelementTypestylers。如果省略 featureTypeelementType,樣式將套用到所有地圖功能/元素。

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