Google 地圖 API V3 之控件

Google官方教程：

Google 地圖 API V3 使用入門

Google 地圖 API V3 針對移動設備進行開發

Google 地圖 API V3 之事件

Google 地圖 API V3 之控件

Google 地圖 API V3 之 疊加層

Google Maps API V3 之繪圖庫 信息窗口

Google Maps API V3 之 圖層

Google Maps API V3 之 路線服務

 

控件概述

通過 Google Maps API 顯示的地圖包含用戶界面元素，以便用戶與地圖進行交互。這些元素稱為“控件”。您可以在 Google Maps API 應用中添加這些控件的多種組合。或者，您也可以不進行任何操作，讓 Google Maps API 處理所有控件行為。

Maps API 帶有一部分可在地圖中使用的內置控件：

• 縮放控件，顯示滑塊（針對大地圖）或“+/-”小按鈕（針對小地圖），用於控制地圖的縮放等級。在非觸摸的設備上，該控件默認顯示在地圖的左上角，而在觸摸設備上則顯示在左下角。
• 平移控件，顯示用於平移地圖的按鈕。在非觸摸的設備上，該控件默認顯示在地圖的左上角。您還可以使用平移控件對圖像進行 45° 旋轉（如果可用的話）。
• 比例控件，用於顯示地圖比例元素。默認情況下，系統不會啟用此控件。
• MapType 控件，可讓用戶在不同的地圖類型（例如 ROADMAP 和 SATELLITE）之間進行切換。該控件默認顯示在地圖的右上角。
• 街景視圖控件包含一個街景小人圖標，將該圖標拖動到地圖上即可啟用街景視圖。該控件默認顯示在地圖的左上角。
• 旋轉控件包含一個較小的圓形圖標，可讓您旋轉包含斜面圖像的地圖。該控件默認顯示在地圖的左上角。（有關詳情，請參閱 45° 圖像。）
• 總覽圖控件會顯示一個簡略的總覽圖，用於在更廣闊區域內反映當前的地圖視口。該控件默認以折疊狀態顯示在地圖的右下角。

注意：以前提供的導航控件已棄用，並分割為獨立的縮放和平移控件。

您無法直接訪問或修改這些地圖控件，但可修改地圖的 MapOptions 字段，這些字段會影響控件的可見性和顯示效果。您可以在初始化地圖后調整控件的顯示效果（使用相應的 MapOptions），也可以通過調用 setOptions() 來更改地圖的選項，以對地圖進行動態修改。

默認情況下，系統並不會啟用所有這些控件。要了解默認用戶界面行為（以及如何修改此類行為），請參閱下面的默認用戶界面。

默認用戶界面

您可能只想指定自己的地圖展示 Google 地圖界面的外觀（其中包括以后要添加到地圖中的所有新地圖項或控件），而不想指定和設置單獨的控件。要實現此行為，您無需進行任何操作。您的地圖會顯示默認控件。

默認控件集

Maps API 提供了以下默認控件：

控件	大屏幕	小屏幕	iPhone	Android
縮放	大型縮放控件，適用於 400x350 像素以上的屏幕	小型縮放控件，適用於 400x350 像素以下的屏幕	不顯示。縮放是通過兩根手指的開合操作來實現的。	“觸摸”式控件
平移	對 400x350 像素以上的屏幕顯示	對 400x350 像素以下的屏幕不顯示	不顯示。平移是通過觸摸來實現的。	不顯示。平移是通過觸摸來實現的。
MapType	水平欄，適用於寬度 300 像素以上的屏幕	下拉菜單，適用於寬度 300 像素以下的屏幕	與大屏幕/小屏幕相同	與大屏幕/小屏幕相同
縮放	不顯示	不顯示	不顯示	不顯示

此外，系統對所有設備都默認啟用了鍵盤處理功能。

停用默認用戶界面

有時，您可能需要關閉 API 的默認用戶界面設置。要執行此操作，請將 Map 的 disableDefaultUI 屬性（在 Map options 對象中）設置為 true。此屬性可停用 Google Maps API 中所有自動執行的用戶界面行為。

 

以下代碼可徹底停用默認用戶界面：

 

function initialize() {  
  var mapOptions = {  
    zoom: 4,  
    center: new google.maps.LatLng(-33, 151),  
    disableDefaultUI: true,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
       mapOptions);  
}  

 

向地圖添加控件

 

您可能想要通過刪除、添加或修改用戶界面行為或控件調整您的界面，並確保即使以后進行了更新，也不會改變這種行為。如果您只想添加或修改現有的行為，您需要確保以顯式的方式將相應的控件添加到自己的應用中。

有些控件在默認情況下會出現在地圖上，而其他控件則只有在您明確提出相關請求后，才會顯示出來。您可以將以下 Map options 對象的字段設為 true 以顯示相應控件，或者設為 false 以隱藏相應控件，從而通過這些字段指定向地圖添加控件或從地圖刪除控件：

{  
  panControl: boolean,  
  zoomControl: boolean,  
  mapTypeControl: boolean,  
  scaleControl: boolean,  
  streetViewControl: boolean,  
  overviewMapControl: boolean  
}  

 

以下示例對地圖進行了設置，使其隱藏導航（縮放和平移）控件，同時顯示比例控件。請注意，我們並未顯式停用默認用戶界面，因此您可在默認用戶界面行為中添加這些修改。

function initialize() {  
  var mapOptions = {  
    zoom: 4,  
    center: new google.maps.LatLng(-33, 151),  
    panControl: false,  
    zoomControl: false,  
    scaleControl: true,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
        mapOptions);  
}  

 

控件選項

有些控件是可以配置的，這樣您就可以更改它們的行為或外觀。例如，縮放控件可顯示為帶有滑塊的大型完整控件，也可以顯示為適用於較小地圖的小型迷你縮放控件。

您可以在創建地圖后更改 MapOptions 對象中的相應控件選項字段，從而對這些控件進行修改。例如，用於更改縮放控件的選項位於 zoomControlOptions 字段中。

縮放控件可能出現在以下某個 style 選項中：

• google.maps.ZoomControlStyle.SMALL，用於顯示迷你縮放控件，其中僅包含 ＋ 和 － 按鈕。此樣式適用於小型地圖。在觸摸設備上，該控件顯示為可相應觸摸事件的 + 和 - 按鈕。
• google.maps.ZoomControlStyle.LARGE 用於顯示標准縮放滑塊控件。在觸摸設備上，該控件顯示為可相應觸摸事件的 + 和 - 按鈕。
• google.maps.ZoomControlStyle.DEFAULT，用於根據地圖大小和運行地圖的設備來挑選合適的縮放控件。

MapType 控件可顯示為以下某個 style 選項：

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用於在水平欄中將一組控件顯示為如 Google 地圖中所示的按鈕。
• google.maps.MapTypeControlStyle.DROPDOWN_MENU，用於顯示單個按鈕控件，以便您通過下拉菜單選擇地圖類型。
• google.maps.MapTypeControlStyle.DEFAULT，用於顯示“默認”行為，該行為取決於屏幕大小且可能會在以后的 API 版本中有所變化。

請注意，如果您確實想要修改任何控件選項，還應將相應的 MapOptions 值設為 true 以顯式啟用相關控件。例如，要將縮放控件設置為顯示 SMALL 樣式，請在 MapOptions對象內使用以下代碼：

 

...  
  zoomControl: true,  
  zoomControlOptions: {  
    style: google.maps.ZoomControlStyle.SMALL  
  }  
  ...  

 

以下示例設置了一個下拉 MapType 控件，並指定縮放控件使用小型迷你縮放布局：

 

function initialize() {  
  var mapOptions = {  
    zoom: 4,  
    center: new google.maps.LatLng(-33, 151),  
    mapTypeControl: true,  
    mapTypeControlOptions: {  
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
    },  
    zoomControl: true,  
    zoomControlOptions: {  
      style: google.maps.ZoomControlStyle.SMALL  
    },  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
}  

 

控件通常是在創建地圖后進行配置的。不過，您可以調用 Map 的 setOptions() 方法並為相應控件傳遞新的控件選項，以動態更改控件的顯示效果。

修改控件

您可以在創建地圖時，通過地圖的 MapOptions 對象中的字段來指定控件的顯示效果。下面對這些字段進行了說明：

• mapTypeControl，用於啟用/停用地圖類型控件，該控件可讓用戶在不同的地圖類型（例如“地圖”和“衛星”）之間進行切換。默認情況下，此控件會顯示在地圖右上角。mapTypeControlOptions，用於進一步指定要用於此控件的 MapTypeControlOptions。
• panControl，用於啟用/停用平移控件。默認情況下，此控件會顯示在地圖左上角。panControlOptions，用於進一步指定要用於此控件的 PanControlOptions。
• zoomControl，用於啟用/停用縮放控件。默認情況下，此控件會顯示在地圖左上角。zoomControlOptions，用於進一步指定要用於此控件的 ZoomControlOptions。
• scaleControl，用於啟用/停用比例控件，該控件可提供一個簡單的地圖比例尺。默認情況下，不會顯示此控件。啟用后，它將顯示在地圖的左下角。scaleControlOptions，用於進一步指定要用於此控件的 ScaleControlOptions。
• rotateControl，用於決定顯示/不顯示旋轉控件，該控件可控制 45° 圖像的方向。默認情況下，該控件是否顯示取決於給定地圖類型在當前的縮放級別和位置上是否存在 45° 圖像。要更改控件的行為，您可以設置地圖的 rotateControlOptions 以指定要使用的 RotateControlOptions（不過，如果當前沒有可用的 45° 圖像，則無法顯示該控件）。
• overviewMapControl，用於啟用/停用總覽圖控件。總覽圖控件可以顯示為完整的控件（展示簡略的總覽圖），也可以顯示為折疊的最小化狀態。默認情況下，該控件處於停用和折疊狀態。overviewMapControlOptions，用於進一步指定要用於此控件的 OverviewMapControlOptions。

請注意，您可以為您最初停用的控件指定選項。

控件定位

每個控件選項都包含 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，表示控件應沿着地圖底部右側放置，其中任何子元素均“流”向底部中心。

請注意，這些位置可能會與用戶界面元素的位置相沖突，而您無法修改用戶界面元素（如版權和 Google 徽標）的位置。在這種情況下，控件將按照每個位置所注明的邏輯“流動”，並顯示在盡可能靠近指定位置的位置。

下面的示例展示了一張簡單的地圖，其中啟用了位於不同位置的所有控件。

function initialize() {  
  var mapOptions = {  
    zoom: 12,  
    center: new google.maps.LatLng(-28.643387, 153.612224),  
    mapTypeId: google.maps.MapTypeId.ROADMAP,  
    mapTypeControl: true,  
    mapTypeControlOptions: {  
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,  
        position: google.maps.ControlPosition.BOTTOM_CENTER  
    },  
    panControl: true,  
    panControlOptions: {  
        position: google.maps.ControlPosition.TOP_RIGHT  
    },  
    zoomControl: true,  
    zoomControlOptions: {  
        style: google.maps.ZoomControlStyle.LARGE,  
        position: google.maps.ControlPosition.LEFT_CENTER  
    },  
    scaleControl: true,  
    scaleControlOptions: {  
        position: google.maps.ControlPosition.TOP_LEFT  
    },  
    streetViewControl: true,  
    streetViewControlOptions: {  
        position: google.maps.ControlPosition.LEFT_TOP  
    }  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
}  

 

下列代碼展示在google地圖中設置控件展現樣式，並設置一標簽並綁定其單擊事件：

<%@ Page Language="C#" AutoEventWireup="true" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>谷歌地圖 v3</title>  
    <script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>  
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            function initialize() {  
                var mapOptions = {  
                    center: new google.maps.LatLng(39.915972, 116.395686), //new google.maps.LatLng(-25.363882, 131.044922),  
                    mapTypeId: google.maps.MapTypeId.ROADMAP,  
                    zoom: 4,  
                    disableDefaultUI: true,  
                    panControl: false,  
                    mapTypeControl: true,  
                    mapTypeControlOptions: {  
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,  
                        position: google.maps.ControlPosition.LEFT_BOTTOM  
                    },  
                    zoomControl: true,  
                    zoomControlOption: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER },  
                    scaleControl: true,  
                    overviewMapControl: true  
                };  
  
                var map = new google.maps.Map(document.getElementById('map'), mapOptions);  
  
                var marker = new google.maps.Marker({  
                    position: map.getCenter(),  
                    map: map,  
                    title: 'Click to zoom'  
                });  
  
                google.maps.event.addListener(map, 'center_changed', function () {  
                    // 3 seconds after the center of the map has changed, pan back to the  
                    // marker.  
                    window.setTimeout(function () {  
                        map.panTo(marker.getPosition());  
                    }, 3000);  
                });  
  
                google.maps.event.addListener(marker, 'click', function () {  
                    map.setZoom(8);  
                    map.setCenter(marker.getPosition());  
                });  
            }  
  
            google.maps.event.addDomListener(window, 'load', initialize);  
  
        });  
    </script>  
</head>  
<body>  
    <table>          
        <tr>  
            <td colspan="5">  
                <div id="map" style="width: 400px; height: 400px;">  
                </div>  
            </td>  
        </tr>  
    </table>  
</body>  
</html>  

 

對應上面代碼的地圖：

 

 

 

自定義控件

除了修改現有 API 控件的樣式和位置外，您還可以創建自己的控件以處理與用戶的交互操作。控件是固定的小部件，浮動在地圖之上的絕對位置處，這與會隨着下面的地圖一起移動的“疊加層”不同。從本質上講，控件只是一個在地圖上具有絕對位置的 <div> 元素，該元素會向用戶顯示某個用戶界面並處理與用戶或地圖的交互（通常通過事件處理程序）。

要創建您自己的自定義控件，沒有什么必須遵循的“規則”。不過，您可以將以下准則視為最佳實踐的參考：

• 為待顯示的控件元素定義適當的 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 styles for the DIV containing the control  
// Setting padding to 5 px will offset the control  
// from the edge of the map.  
controlDiv.style.padding = '5px';  
  
// Set CSS for the control border.  
var controlUI = document.createElement('div');  
controlUI.style.backgroundColor = 'white';  
controlUI.style.borderStyle = 'solid';  
controlUI.style.borderWidth = '2px';  
controlUI.style.cursor = 'pointer';  
controlUI.style.textAlign = 'center';  
controlUI.title = 'Click to set the map to Home';  
controlDiv.appendChild(controlUI);  
  
// Set CSS for the control interior.  
var controlText = document.createElement('div');  
controlText.style.fontFamily = 'Arial,sans-serif';  
controlText.style.fontSize = '12px';  
controlText.style.paddingLeft = '4px';  
controlText.style.paddingRight = '4px';  
controlText.innerHTML = '<strong>Home</strong>';  
controlUI.appendChild(controlText);  

 

處理自定義控件的事件

要使控件有用，它必須能夠實際完成某些任務。控件的用途由您確定。控件可以響應用戶的輸入內容，也可以響應 Map 的狀態變化。

為響應用戶輸入，Maps API 提供了一個跨瀏覽器的事件處理方法 addDomListener()，該方法可以處理大多數受瀏覽器支持的 DOM 事件。以下代碼段為瀏覽器的 'click'事件添加了一個監聽器。請注意，此事件是從 DOM（而非地圖）接收的。

// Setup the click event listener: simply set the map to center on Chicago  
var chicago = new google.maps.LatLng(41.850033, -87.6500523);  
  
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 會先放置所有的 API 默認控件，然后才開始放置所有自定義控件。您可以通過將控件的 index 屬性設為負值，以覆蓋此行為。自定義控件無法放置在徽標的左側或版權的右側。

以下代碼創建了一個新的自定義控件（未顯示其構造函數），並將該控件添加到地圖中的 TOP_RIGHT 位置。

 

var map = new google.maps.Map(document.getElementById('map_canvas'), 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 = new google.maps.LatLng(41.850033, -87.6500523);  
  
/** 
 * The HomeControl adds a control to the map that simply 
 * returns the user to Chicago. This constructor takes 
 * the control DIV as an argument. 
 */  
  
function HomeControl(controlDiv, map) {  
  
  // Set CSS styles for the DIV containing the control  
  // Setting padding to 5 px will offset the control  
  // from the edge of the map.  
  controlDiv.style.padding = '5px';  
  
  // Set CSS for the control border.  
  var controlUI = document.createElement('div');  
  controlUI.style.backgroundColor = 'white';  
  controlUI.style.borderStyle = 'solid';  
  controlUI.style.borderWidth = '2px';  
  controlUI.style.cursor = 'pointer';  
  controlUI.style.textAlign = 'center';  
  controlUI.title = 'Click to set the map to Home';  
  controlDiv.appendChild(controlUI);  
  
  // Set CSS for the control interior.  
  var controlText = document.createElement('div');  
  controlText.style.fontFamily = 'Arial,sans-serif';  
  controlText.style.fontSize = '12px';  
  controlText.style.paddingLeft = '4px';  
  controlText.style.paddingRight = '4px';  
  controlText.innerHTML = '<strong>Home</strong>';  
  controlUI.appendChild(controlText);  
  
  // Setup the click event listeners: simply set the map to Chicago.  
  google.maps.event.addDomListener(controlUI, 'click', function() {  
    map.setCenter(chicago)  
  });  
}  
  
function initialize() {  
  var mapDiv = document.getElementById('map_canvas');  
  var mapOptions = {  
    zoom: 12,  
    center: chicago,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  map = new google.maps.Map(mapDiv, mapOptions);  
  
  // Create the DIV to hold the control and call the HomeControl() constructor  
  // passing in this DIV.  
  var homeControlDiv = document.createElement('div');  
  var homeControl = new HomeControl(homeControlDiv, map);  
  
  homeControlDiv.index = 1;  
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);  
}  

 

為控件添加狀態

控件也可以存儲狀態。下面的示例與前面所示的類似，但該控件包含了一個額外的“Set Home”按鈕，它將控件設置為顯示一個新首頁位置。為此，我們在該控件內創建了一個 home_ 屬性以存儲此狀態，並為該狀態提供了獲取函數和設置函數。

 

<%@ Page Language="C#" AutoEventWireup="true" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>谷歌地圖 v3</title>  
    <script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>  
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            var beijing = new google.maps.LatLng(39.915972, 116.395686); //坐標  
  
            /** 
            * The HomeControl adds a control to the map that simply 
            * returns the user to Chicago. This constructor takes 
            * the control DIV as an argument. 
            */  
            function HomeControl(controlDiv, map) {//自定義控件 HomeControl：以北京坐標為地圖中心  
  
                // Set CSS styles for the DIV containing the control  
                // Setting padding to 5 px will offset the control  
                // from the edge of the map.  
                controlDiv.style.padding = '5px';  
  
                // Set CSS for the control border.  
                var controlUI = document.createElement('div'); //控件容器  
                controlUI.style.backgroundColor = 'white';  
                controlUI.style.borderStyle = 'solid';  
                controlUI.style.borderWidth = '2px';  
                controlUI.style.cursor = 'pointer';  
                controlUI.style.textAlign = 'center';  
                controlUI.title = 'Click to set the map to Home';  
                controlDiv.appendChild(controlUI);  
  
                // Set CSS for the control interior.  
                var controlText = document.createElement('div'); //控件容器內容  
                controlText.style.fontFamily = 'Arial,sans-serif';  
                controlText.style.fontSize = '12px';  
                controlText.style.paddingLeft = '4px';  
                controlText.style.paddingRight = '4px';  
                controlText.innerHTML = '<strong>Home</strong>';  
                controlUI.appendChild(controlText);  
  
                // Setup the click event listeners: simply set the map to beijing.  
                google.maps.event.addDomListener(controlUI, 'click', function () {//綁定該控件Click單擊事件  
                    map.setCenter(beijing);//事件內容為：使坐標北京居中  
                });  
            }  
  
  
            /** 
            * The MyHomeControl adds a control to the map that 
            * returns the user to the control's defined home. 
            */  
  
            // Define a property to hold the Home state.  
            MyHomeControl.prototype.home_ = null;  
  
            // Define setters and getters for this property.  
            MyHomeControl.prototype.getHome = function () {  
                return this.home_;  
            }  
  
            MyHomeControl.prototype.setHome = function (home) {  
                this.home_ = home;  
            }  
  
            function MyHomeControl(map, div, home) {  
  
                // Get the control DIV. We'll attach our control UI to this DIV.  
                var controlDiv = div;  
  
                // We set up a variable for the 'this' keyword since we're adding event  
                // listeners later and 'this' will be out of scope.  
                var control = this;  
  
                // Set the home property upon construction.  
                control.home_ = home;  
  
                // Set CSS styles for the DIV containing the control. Setting padding to  
                // 5 px will offset the control from the edge of the map.  
                controlDiv.style.padding = '5px';  
  
                // Set CSS for the control border.  
                var goHomeUI = document.createElement('div');  
                goHomeUI.style.backgroundColor = 'white';  
                goHomeUI.title = 'Click to set the map to Home';  
                controlDiv.appendChild(goHomeUI);  
  
                // Set CSS for the control interior.  
                var goHomeText = document.createElement('div');  
                goHomeText.innerHTML = '<strong>Home</strong>';  
                goHomeUI.appendChild(goHomeText);  
  
                // Set CSS for the setHome control border.  
                var setHomeUI = document.createElement('div');  
                setHomeUI.style.backgroundColor = 'white';  
                setHomeUI.title = 'Click to set Home to the current center';  
                controlDiv.appendChild(setHomeUI);  
  
                // Set CSS for the control interior.  
                var setHomeText = document.createElement('div');  
                setHomeText.innerHTML = '<strong>Set Home</strong>';  
                setHomeUI.appendChild(setHomeText);  
  
                // Setup the click event listener for Home:  
                // simply set the map to the control's current home property.  
                google.maps.event.addDomListener(goHomeUI, 'click', function () {  
                    var currentHome = control.getHome();//定位到最近一次設置的Home點  
                    map.setCenter(currentHome);  
                });  
  
                // Setup the click event listener for Set Home:  
                // Set the control's home to the current Map center.  
                google.maps.event.addDomListener(setHomeUI, 'click', function () {  
                    var newHome = map.getCenter();  
                    control.setHome(newHome);//設置最近一次Home點  
                });  
            }  
  
  
            function initialize() {  
                var mapDiv = document.getElementById('map');  
                var mapOptions = {  
                    zoom: 12,  
                    center: beijing,  
                    mapTypeId: google.maps.MapTypeId.ROADMAP,  
                    disableDefaultUI: true,  
                    panControl: false,  
                    mapTypeControl: true,  
                    mapTypeControlOptions: {  
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,  
                        position: google.maps.ControlPosition.LEFT_BOTTOM  
                    },  
                    zoomControl: true,  
                    zoomControlOption: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER },  
                    scaleControl: true,  
                    overviewMapControl: true  
                }  
                var map = new google.maps.Map(mapDiv, mapOptions);  
  
                // Create the DIV to hold the control and call the HomeControl() constructor  
                // passing in this DIV.  
                var homeControlDiv = document.createElement('div');  
                var homeControl = new HomeControl(homeControlDiv, map);  
                homeControlDiv.index = 1;  
                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);  
  
                var myHomeControlDiv = document.createElement("div");  
                var myHomeControl = new MyHomeControl(map, myHomeControlDiv, beijing);  
                myHomeControlDiv.index = 2;  
                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(myHomeControlDiv);  
            }  
  
            google.maps.event.addDomListener(window, 'load', initialize);  
        });  
    </script>  
</head>  
<body>  
    <table>          
        <tr>  
            <td colspan="5">  
                <div id="map" style="width: 400px; height: 400px;">  
                </div>  
            </td>  
        </tr>  
    </table>  
</body>  
</html>  

 

運行結果如下圖：