05年1月
為您的網站獲取Google Maps API密鑰
將Google地圖添加到您的網站的最佳方式是使用Google地圖API。 Google建議您獲取API密鑰以使用地圖。
您無需獲取API密鑰即可使用Google Maps API v3，但它非常實用，因為它可讓您監控自己的使用情況並支付額外的訪問權限。 Google Maps API v3每個用戶的每秒請求限額為1個，每天最多請求25,000個請求。 如果您的網頁超出了這些限制，則需要啟用結算才能獲得更多。
如何獲取Google Maps API密鑰
- 使用您的Google帳戶登錄Google。
- 轉到Developers Console
- 滾動列表並找到Google Maps API v3，然後點擊“關閉”按鈕將其打開。
- 閱讀並同意這些條款。
- 轉到API控制台並從左側菜單中選擇“API訪問”
- 在“簡單API訪問”部分，點擊“創建新的服務器密鑰...”按鈕。
- 輸入您的網絡服務器的IP地址。 這是您的地圖請求將來自的IP。 如果你不知道你的IP地址，你可以查看它。
- 複製“API key：”行中的文本（不包括該標題）。 這是您的地圖的API密鑰。
05年05月
將您的地址轉換為坐標
為了在您的網頁上使用Google地圖，您需要擁有該地點的經緯度。 您可以從GPS獲取這些信息，或者您可以使用Geocoder.us等在線工具來告訴您。
- 轉到Geocoder.us並在搜索框中輸入您的地址。
- 複製緯度的第一個數字（前面沒有字母）並將其粘貼到文本文件中。 你不需要度數（º）指標。
- 複製經度的第一個數字（前面沒有字母）並將其粘貼到文本文件中。
你的經緯度看起來像這樣：
40.756076
-73.990838
Geocoder.us只適用於美國地址，如果您需要獲取其他國家/地區的坐標，則應在您所在地區搜索類似的工具。
05年3月
將地圖添加到您的網頁
首先，將地圖腳本添加到
你的文件
打開您的網頁並將以下內容添加到文檔的HEAD中。
將突出顯示的部分更改為您在步驟2中記下的緯度和經度編號。
其次，將地圖元素添加到您的頁面
將所有腳本元素添加到文檔的HEAD後，您需要將地圖放在頁面上。 你可以通過添加一個id =“map-canvas”屬性的DIV元素來實現。 我建議你也可以用適合你頁面的寬度和高度來設計這個div：
最後，上傳和測試
最後要做的是上傳你的頁面並測試你的地圖顯示。 以下是網頁上的Google地圖示例。 請注意，由於About.com CMS的工作方式，您必須點擊鏈接才能顯示地圖。 這不是你的頁面上的情況。
如果您的地圖不顯示，請嘗試使用BODY屬性對其進行初始化：
onload =“initialize（）” >
其他要檢查您的地圖是否未加載的內容包括：
- 在你的JavaScript中尋找拼寫錯誤，包括案例。 JavaScript區分大小寫。
- 確保您已設置縮放和中心選項。
- 確保您的DIV元素位於頁面上，且ID正確。
- 確保你的DIV元素有一個高度。
04年05月
為您的地圖添加標記
但是如果沒有標記告訴人們他們應該去哪裡，那麼你的位置地圖有什麼好處呢？
要添加標準的Google Maps紅色標記，請在var map = ...行下方的腳本中添加以下內容：
var myLatlng = new google.maps.LatLng（ latitude，longitude ）;
var marker = new google.maps.Marker（{
位置：myLatlng，
地圖：地圖，
標題：“ 前總部總部 ”
}）;
將突出顯示的文本更改為您的經緯度，以及將用戶懸停在標記上時顯示的標題。
您可以根據需要在頁面中添加盡可能多的標記，只需添加新的坐標和標題新變量，但如果地圖太小而無法顯示所有標記，則除非讀者縮小，否則不會顯示。
var latlng 2 = new google.maps.LatLng（ 37.3316591，-122.0301778 ）;
var myMarker 2 = new google.maps.Marker（{
位置：latlng 2 ，
地圖：地圖，
標題：“ 蘋果電腦 ”
}）;
以下是帶有標記的Google地圖示例。 請注意，由於About.com CMS的工作方式，您必須點擊鏈接才能顯示地圖。 這不是你的頁面上的情況。
05年05月
添加第二個（或更多）地圖到您的頁面
如果你看過我的示例谷歌地圖頁面，你會注意到我有多個地圖顯示在頁面上。 這很容易做到。 就是這樣。
- 獲取您想顯示的所有地圖的經緯度，正如我們在本教程的第2步中所了解的。
- 插入我們在本教程的第3步中學到的第一張地圖。 如果您想讓地圖有標記，請按照步驟4添加標記。
- 對於第二張地圖，您需要為initialize（）腳本添加3個新行：
var latlng2 = new google.maps.LatLng（ 第二個坐標 ）;
var myOptions2 = {zoom：18，center：latlng2，mapTypeId：google.maps.MapTypeId.ROADMAP};
var map2 = new google.maps.Map（document.getElementById（“map_canvas_2”），myOptions2）; - 如果您還想在新地圖上添加標記，請添加指向第二個坐標和第二個地圖的第二個標記：
var myMarker2 = new google.maps.Marker（{position： latlng2 ，map： map2 ，title：“ Your Marker Title ”}）; - 然後添加第二個
你想要第二張地圖的地方。 並且一定要給它一個id =“map_canvas_2”ID。
- 當你的頁面加載時，將顯示兩個地圖
這是一個包含兩個Google地圖的頁面的代碼：