控制項

控制項總覽

透過 Google Maps JavaScript API 顯示的地圖包含 UI 元素，可讓使用者與地圖互動。這些元素稱為「控制項」，您可以在您的應用程式中放入各種這些控制項。您也可以不做任何事情，讓 Google Maps JavaScript API 處理所有控制項行為。

下列地圖顯示 Google Maps JavaScript API 所顯示的預設控制項集合：

檢視範例 (control-default.html)。

以下是您可以在您的地圖中使用的完整控制項集合清單：

「縮放控制項」顯示 "+" 和 "-" 按鈕，用來變更地圖的縮放層級。此控制項預設顯示在地圖的右下角。
「地圖類型控制項」可透過下拉式清單中或呈現水平的按鈕列樣式使用，可讓使用者選取地圖類型 (ROADMAP、SATELLITE、HYBRID 或 TERRAIN)。此控制項預設顯示在地圖的左上角。
「街景服務控制項」包含「小黃人」圖示，可以拖曳到地圖上以啟用街景功能。此控制項預設顯示在靠近地圖的右下角。
「旋轉控制項」會提供傾斜和旋轉選項的組合，供包含傾斜影像的地圖使用。此控制項預設顯示在靠近地圖的右下角。請參閱 45° 影像瞭解更多資訊。
「比例控制項」顯示地圖比例元素。此控制項預設是停用的。
「全螢幕控制項」提供可用來以全螢幕模式開啟地圖的選項。此控制項預設會在行動裝置上啟用，而且預設會在電腦上停用。注意：iOS 不支援全螢幕功能。因此，全螢幕控制項在 iOS 裝置上是不可見的。

您不是直接存取或修改這些地圖控制項，而是修改地圖的 MapOptions 欄位，影響控制項的能見度和呈現方式。您可以在具現化地圖時調整控制項的呈現方式（使用適當的 MapOptions）或呼叫 setOptions() 變更地圖的選項來動態修改地圖。

並非所有控制項預設都會啟用。若要瞭解預設的 UI 行為（以及如何修改這類行為），請參閱下面的預設 UI。

預設 UI

如果地圖太小 (200x200px)，所有控制項預設都會消失。您可以明確設定讓控制項顯示來覆寫此行為。請參閱在地圖中加入控制項。

控制項的行為與外觀在行動裝置與電腦裝置上都相同，但全螢幕控制項例外（請參閱控制項清單中描述的行為）。

此外，所有裝置上的鍵盤處理預設都是開啟。

停用預設 UI

您可以完全關閉 API 的預設 UI 設定。如果要這麼做，請將地圖的 disableDefaultUI 屬性（在 MapOptions 物件內）設定為 true。此屬性會從 Google Maps JavaScript API 停用任何自動 UI 行為。

下列程式碼完全停用預設 UI：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

檢視範例 (control-disableUI.html)。

在地圖中加入控制項

您可以移除、加入或修改 UI 行為或控制項來調整您的介面，但是要確認未來更新時不會改變此行為。如果您只想要新增或修改現有的行為，必須確認您的應用程式已明確加入該控制項。

除非您具體要求，否則有些控制項預設會顯示在地圖上，有些則不會顯示。下列 MapOptions 物件的欄位指定新增或移除地圖的控制項，設定為 true 可讓控制項顯示，設定為 false 可讓控制項隱藏：

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

如果地圖小於 200x200px，所有控制項預設都會消失。您可以明確設定讓控制項顯示來覆寫此行為。例如，下表列出根據地圖大小和 zoomControl 欄位的設定，是否能看見縮放控制項：

地圖大小	`zoomControl`	可見？
任意	`false`	否
任意	`true`	是
>= 200x200px	`undefined`	是
< 200x200px	`undefined`	否

下列範例設定地圖隱藏縮放控制項並顯示比例控制項。請注意，我們沒有明確停用預設 UI，所以除了預設的 UI 行為，還會額外增加這些修改。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

檢視範例 (control-simple.html)。

控制項選項

許多控制項可加以設定，讓您改變控制項的行為或變更控制項的外觀。例如「地圖類型控制項」可以顯示為水平列或下拉式功能表。

這些控制項修改的方式是在建立地圖時，改變 MapOptions 物件內適當的控制項「選項」欄位。

例如，改變「地圖類型」控制項的選項是由 mapTypeControlOptions 欄位指定。「地圖類型」控制項可能會以下列其中一個 style 選項顯示：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR 以水平列顯示一系列的按鈕控制項，如 Google 地圖上顯示的方式。
google.maps.MapTypeControlStyle.DROPDOWN_MENU 顯示一個按鈕控制項，讓您透過下拉式功能表選取地圖類型。
google.maps.MapTypeControlStyle.DEFAULT 根據螢幕大小顯示預設行為，可能會在未來的 API 版本有所變更。

請注意，如果您修改了任何控制項選項，就要同時將適當的 MapOptions 值設定為 true，明確啟用控制項。例如，要設定「地圖類型」控制項展示 DROPDOWN_MENU 樣式，請在 MapOptions 物件內使用下列程式碼：

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

下列範例示範如何變更控制項的預設位置和樣式。

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

檢視範例 (control-options.html)。

控制項通常是在建立地圖時設定。不過，您可以呼叫 Map 的 setOptions() 方法，傳遞新的控制項選項，動態改變控制項的呈現方式。

修改控制項

當您透過地圖的 MapOptions 物件內的欄位建立地圖時，要指定控制項的呈現方式。這些欄位說明如下：

zoomControl 啟用/停用「縮放」控制項。此控制項預設會顯示在靠近地圖的右下角。zoomControlOptions 欄位額外指定 ZoomControlOptions 供此控制項使用。
mapTypeControl 啟用/停用讓使用者切換地圖類型（例如「地圖」和「衛星」）的「地圖類型」控制項。此控制項預設會顯示在靠近地圖的左上角。mapTypeControlOptions 欄位額外指定 MapTypeControlOptions 供此控制項使用。
streetViewControl 啟用/停用讓使用者啟用「街景服務」全景功能的「小黃人」控制項。此控制項預設會顯示在靠近地圖的右下角。streetViewControlOptions 欄位額外指定 StreetViewControlOptions 供此控制項使用。
rotateControl 啟用/停用顯示控制 45° 影像方向的「旋轉」控制項。此控制項是否出現預設是由指定地圖類型在目前的縮放和地點是否有 45° 影像來決定。您可以設定地圖的 rotateControlOptions 指定要使用的 RotateControlOptions 來改變控制項的行為。如果目前沒有 45° 影像，就無法讓此控制項顯示。
scaleControl 啟用/停用提供簡單地圖比例的「比例」控制項。此控制項預設不會顯示。如果啟用，則一律顯示在地圖的右下角。scaleControlOptions 額外指定 ScaleControlOptions 供此控制項使用。
fullscreenControl 可啟用/停用以全螢幕模式開啟地圖的控制項。在預設情況下，此控制項在行動裝置上是可見的，但在電腦上則不可見。啟用時，此控制項會出現在地圖右上角附近。fullscreenControlOptions 會額外指定 FullscreenControlControlOptions 以針對此控制項使用。

請注意，您可以為一開始停用的控制項指定選項。

控制項定位

大部分的控制項選項都有 position 屬性 (屬於 ControlPosition 類型)，這個屬性表示控制項放在地圖上的位置。這些控制項的位置並不是絕對的。API 會讓這些控制項在指定的限制條件（例如地圖大小）內，在現有的地圖元素或其他控制項周圍移動，聰明地擺放控制項。

注意：雖然 API 會嘗試聰明地安排控制項，但是如果版面配置很複雜，並不保證控制項不會互相重疊。

以下是支援的控制項位置：

TOP_CENTER 表示要沿著地圖頂端中央放置控制項。
TOP_LEFT 表示要沿著地圖左上方放置控制項，控制項的所有子元素都往頂端中央「延伸」。
TOP_RIGHT 表示要沿著地圖右上方放置控制項，控制項的所有子元素都往頂端中央「延伸」。
LEFT_TOP 表示要沿著地圖左上方放置控制項，但是要在所有 TOP_LEFT 元素下方。
RIGHT_TOP 表示要沿著地圖右上方放置控制項，但是要在所有 TOP_RIGHT 元素下方。
LEFT_CENTER 表示要沿著地圖左側放置控制項，位於 TOP_LEFT 和 BOTTOM_LEFT 位置的中間。
RIGHT_CENTER 表示要沿著地圖右側放置控制項，位於 TOP_RIGHT 和 BOTTOM_RIGHT 位置的中間。
LEFT_BOTTOM 表示要沿著地圖左下方放置控制項，但是要在所有 BOTTOM_LEFT 元素上方。
RIGHT_BOTTOM 表示要沿著地圖右下方放置控制項，但是要在所有 BOTTOM_RIGHT 元素上方。
BOTTOM_CENTER 表示要沿著地圖底部中間放置控制項。
BOTTOM_LEFT 表示要沿著地圖左下方放置控制項，控制項的所有子元素都往底部中央「延伸」。
BOTTOM_RIGHT 表示要沿著地圖右下方放置控制項，控制項的所有子元素都往底部中央「延伸」。

檢視範例 (control-positioning-labels.html)。

請注意，這些位置可能會與您無法修改的 UI 元素（例如版權和 Google 標誌）位置重疊。如果發生這個情況，控制項會根據針對每種位置標示的邏輯移動，儘可能靠近原來指示的位置顯示。

下列範例顯示一個簡單的地圖，讓所有控制項在不同的位置啟用。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

檢視範例 (control-positioning.html)。

自訂控制項

除了修改現有 API 控制項的樣式和位置之外，您還可以建立自己的控制項和使用者互動。控制項是浮動在地圖頂端絕對位置的固定小工具，與隨著底下地圖移動的「疊加層」不同。基本上，控制項只是一個在地圖上有絕對位置的 <div> 元素，對使用者顯示一些 UI，通常透過事件處理常式來處理與使用者或地圖的互動行為。

若要建立您自己的自訂控制項，幾乎不需要什麼規則。不過，您可以按照下列指導方針：

為要顯示的控制項元素定義適當的 CSS。
透過事件處理常式，處理與使用者或地圖的互動，變更地圖的屬性或處理使用者事件（例如 'click' 事件）。
建立 <div> 元素以保留控制項，並將此控制項加入 Map 的 controls 屬性。

以下將討論每項重點。

繪製自訂控制項

繪製控制項的方式由您自己決定。我們一般會建議您將所有控制項呈現方式放在一個 <div> 元素內，方便您以一個單位控制您的控制項。我們將會在下面顯示的範例，使用這種設計方式。

要設計吸引人的控制項，必須對 CSS 和 DOM 結構有某種程度的認識。下列程式碼示範如何從容納的 <div> 建立簡單的控制項，一個 <div> 保留按鈕外框，另一個 <div> 保留按鈕內部。

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

處理自訂控制項的事件

控制項要好用，就必須實際執行一些動作。控制項執行的動作由您自己決定。控制項可以回應使用者輸入，或者回應 Map 的狀態變更。

如果要回應使用者輸入，Google Maps JavaScript API 提供跨瀏覽器的事件處理方法 addDomListener()，它可以處理大部分瀏覽器的支援的 DOM 事件。下列程式碼片段會為瀏覽器的 'click' 事件新增接聽程式。請注意，此事件會從 DOM 收到，而不會從地圖。

// Setup the click event listener: simply set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

將自訂控制項定位

自訂控制項在地圖上的定位方式是在 Map 物件的 controls 屬性內，將控制項放在適當的位置。這個屬性包含一個 google.maps.ControlPosition 陣列。將 Node （通常是 <div>）加入適當的 ControlPosition，就可以將自訂控制項加入地圖。（如需這些位置的資訊，請參閱上面的控制項定位）。

每個 ControlPosition 都會為在該位置顯示的控制項儲存一個 MVCArray。所以，當該位置新增或移除控制項時，API 就會據此更新控制項。

API 會依照 index 屬性的順序在每個位置放置控制項；索引越低的控制項先放置。例如，位於 BOTTOM_RIGHT 位置的兩個自訂控制項會根據此索引順序放置，索引值較低的控制項優先放置。根據預設，所有 API 預設控制項都放置「之後」，才會放置所有自訂控制項。您可以將控制項的 index 屬性設定為負值來覆寫此行為。自訂控制項不能放在標誌的左邊或版權的右邊。

下列程式碼建立一個新的自訂控制項 (未顯示其建構函式)，然後加入地圖的 TOP_RIGHT 位置。

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

自訂控制項範例

下列控制項很簡單 (但不是很有用)，結合上面顯示的方式。此控制項透過在某個預設位置讓地圖置中，回應 DOM 'click' 事件：

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

檢視範例 (control-custom.html)。

對控制項加入狀態

控制項也可以儲存狀態。下列範例類似之前的範例，不過控制項包含一個額外的 "Set Home" 按鈕，這個按鈕設定控制項顯示新的住家位置。我們在控制項內建立一個 home_ 屬性來儲存狀態，然後提供該狀態的 getter 和 setter 來達到這個目的。

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

檢視範例 (control-custom-state.html)。

您已全部設定完成！

控制項總覽

預設 UI

停用預設 UI

在地圖中加入控制項

控制項選項

修改控制項

控制項定位

自訂控制項

繪製自訂控制項

處理自訂控制項的事件

將自訂控制項定位

自訂控制項範例

對控制項加入狀態

傳送您對下列選項的寶貴意見...

您已全部設定完成！

啟用 Google Maps JavaScript API

控制項

控制項總覽

預設 UI

停用預設 UI

在地圖中加入控制項

控制項選項

修改控制項

控制項定位

自訂控制項

繪製自訂控制項

處理自訂控制項的事件

將自訂控制項定位

自訂控制項範例

對控制項加入狀態

傳送您對下列選項的寶貴意見...