Google官方教程：
鑒於google被屏蔽，復制過來，供參考。
Hello, World
要開始了解 Google Maps API，最簡單的方法就是查看簡單的示例。以下網頁顯示了一張以澳大利亞新南威爾士的悉尼為中心的地圖：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
盡管此示例較為簡單，也請注意以下事項：
- 在此示例中，使用
<!DOCTYPE html>聲明將應用聲明為 HTML5。 - 使用
script標記加入 Maps API JavaScript。 - 創建一個名為“map_canvas”的
div元素以存儲該地圖。 - 創建 Javascript 對象常量以存儲若干地圖屬性。
- 編寫 JavaScript 函數以創建“map”對象。
- 通過
body標記的onload事件初始化該地圖對象。
下面對這些步驟進行了說明。
將您的應用聲明為 HTML5
建議您在自己的網絡應用內聲明一個真實的 DOCTYPE。在本文的示例中，我們使用簡單的 HTML5 DOCTYPE 將應用聲明為 HTML5，如下所示：
<!DOCTYPE html>
當前的大多數瀏覽器會以“標准模式”呈現使用此 DOCTYPE 聲明的內容，這意味着您的應用應具有更強的跨瀏覽器適應能力。DOCTYPE 還設計為可適度降級；無法理解該聲明的瀏覽器會將其忽略，並使用“兼容模式”來顯示其內容。
請注意，某些在兼容模式下工作的 CSS 在標准模式中是無效的。具體地說，所有以百分比表示的大小必須繼承自父塊元素，而如果這些父元素中的某個父元素沒有指定大小，則系統會將其大小假定為 0x0 像素。因此，我們加入了以下 <style> 聲明：
<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style>
該 CSS 聲明用於表示地圖容器 <div>（名為 map_canvas）應占據 HTML 主體的整個高度。請注意，我們還必須明確聲明 <body> 和 <html> 所占的百分比。
加載 Google Maps API
<html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script>
script 標記中包含指向 JavaScript 文件所處位置的網址，該 JavaScript 文件可加載使用 Google Maps API 所需的所有符號和定義。script 為必填標記。
key 參數包含您應用的 API 密鑰。請注意，此密鑰不適用於 v2 API，且必須通過 API 控制台生成。V3版本不需要。
網址的 sensor 參數（必須添加）用於表示應用是否會使用 GPS 定位器等傳感器來確定用戶的位置。在此示例中，我們將該參數設為變量“set_to_true_or_false”，用於強調您必須將該值明確設為 true 或 false。
HTTPS
如果您的應用是 HTTPS 應用，那么您可改為通過 HTTPS 加載 Google Maps JavaScript API：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script>
在 SSL 應用中必須通過 HTTPS 加載 Maps API，以免在大多數瀏覽器中顯示安全警告，並且建議您對請求中包含用戶所處位置等敏感用戶數據的應用也采用該做法。
庫
在通過 http://maps.googleapis.com/maps/api/js 網址加載 JavaScript Maps API 時，您也可以選擇使用 libraries 參數加載其他庫。庫是用於向主 JavaScript API 提供其他功能的代碼模塊，不過只有在您專門請求時才會加載。
異步加載 API
您可能希望在網頁完全加載后或根據需要加載 Maps API JavaScript 代碼。為此，您可以插入自己的 <script> 標記作為針對 window.onload 事件或函數調用的響應，不過您還需要指示 Maps JavaScript API 引導程序在 Maps JavaScript API 代碼完全加載后再執行應用代碼。要實現此目的，您可以使用 callback 參數，該參數為函數要在 API 完全加載后執行的變量。
以下代碼指示應用在網頁完全加載后再加載 Maps API（使用 window.onload），並在該網頁中將 Maps JavaScript API 寫入 <script> 標記。此外，我們還向 Maps API 引導程序傳遞了 callback=initialize，從而指示該 API 僅在自身完全加載后執行 initialize() 函數：
function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;
地圖 DOM 元素
對於要在網頁上顯示的地圖，我們需要為其留出一個位置。通常，我們會創建一個名為 div 的元素，然后在瀏覽器的文檔對象模型 (DOM) 中獲取對此元素的引用。
在以上示例中，我們定義了一個名為“map_canvas”的 <div>，並使用樣式屬性為其設置大小。請注意，這一大小已設置為“100％”，這將會展開地圖，使之符合移動設備的屏幕大小。您可能需要根據瀏覽器的屏幕大小和填充區域調整這些值。請注意，地圖將始終根據其中所包含的元素的大小決定其本身大小，因此，您必須始終為 <div> 明確設置一個適用的大小。
地圖選項
-
var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP };
要初始化地圖，我們需要先創建一個 Map options 對象來包含地圖初始化變量。該對象不是構建出來的，而是以對象常量的形式創建得到的。
緯度和經度
由於我們要通過 center 將地圖中心設為特定的點，因此會創建 LatLng 對象，同時按 {緯度,經度} 的順序傳遞位置的坐標，以存儲該位置：
將地址轉換為地理地點的過程稱為“地理編碼”。此版本的 Google Maps API 支持地理編碼。有關詳情，請參閱此指南的服務章節中的地理編碼。
縮放級別
地圖顯示時的初始分辨率可以通過 zoom 屬性進行設置，其中縮放 0 相當於地球地圖可縮小的最低級別，並且縮放級別越高，地圖放大的分辨率就越高。
zoom: 8
如果要將包含完整地球的地圖作為單張圖片提供，要么需要極大的地圖，要么需要分辨率較低的小型地圖。因此，Google 地圖和 Maps API 內的地圖圖片會被分割為地圖“圖塊”和“縮放級別”兩部分。在低縮放級別下，一小組地圖圖塊就可以覆蓋廣闊的區域；而在高縮放級別下，圖塊的分辨率較高，覆蓋的區域則較小。
地圖類型
此時，您還必須明確設置一個初始地圖類型。
mapTypeId: google.maps.MapTypeId.ROADMAP
系統支持以下地圖類型：
ROADMAP，用於顯示 Google 地圖的默認、普通 2D 圖塊。SATELLITE，用於顯示拍攝的圖塊。HYBRID，用於同時顯示拍攝的圖塊和重要地圖項（道路、城市名）的圖塊圖層。TERRAIN，用於顯示自然地形圖塊，其中包含海拔和水體地圖項（山脈、河流等）。
地圖對象
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
用於代表地圖的 JavaScript 類屬於 Map 類。此類的對象定義了網頁上的單個地圖。（您可以創建多個此類的實例，每個對象都將在網頁上定義一個單獨的地圖。）我們使用 Javascript new 運算符創建了一個此類的新實例。
創建新的地圖實例時，您需要在網頁中指定一個 <div> HTML 元素作為地圖的容器。HTML 節點是 Javascript document 對象的子對象，我們通過document.getElementById() 方法獲取了對該元素的引用。
此代碼用於定義一個變量（名為 map），然后將其分配至新的 Map 對象，同時傳遞到 mapOptions 對象常量所定義的選項中。這些選項將用於初始化地圖的屬性。Map() 函數稱為“構造函數”，其定義如下：
| 構造函數 | 說明 |
|---|---|
Map(mapDiv:Node, opts?:MapOptions) |
使用傳遞的任何（可選）參數在給定的 HTML 容器（通常為 DIV 元素）中創建新的地圖。 |
加載地圖
<body onload="initialize()">
呈現 HTML 網頁時，系統會擴展文檔對象模型 (DOM)，接收所有外部圖片和腳本並將其合並到 document 對象中。為確保系統在網頁完全加載后才將我們的地圖放到網頁上，我們只會在 HTML 網頁的 <body> 元素收到 onload 事件后，才開始執行用於構建 Map 對象的函數。這樣做可以避免出現意外行為，並讓我們更好地控制地圖的繪制方式和時間。
body 標記的 onload 屬性為一個事件處理程序示例。Google Maps JavaScript API 還提供了一組事件，供您處理以確定狀態變化。
Last updated 二月 1, 2013.