第一步驟：首先先去這裡申請一組 Google Maps API，這組 Key 的目的是限制只能用在你設定網站上面。
英文 Go 、 簡體 Go

第二步驟：將我已閱讀並同意這條款與條件 (I have read and agree with the terms and conditions) 打勾。
然後填入欲申請 Google Maps API 的網址。
按產生 API 密碼 (Generate API Key)，取得您的 Key。
會出現 Thank you for signing up for a Google Maps API key!

第三步驟：用記事本記下這三項資料：
1.您的 key 是 (Your key is)：
ABQIAAAAAMjXPFRwPVUT34ElVEbxaxTATQLkw1v6gTWZDRbqEhXlQ01ELRTWTUO_dRlAuruUuSONenDXSTPq5w

2.你設定之 URL 是 (This key is good for all URLs in this directory)：
http://www.webpage.idv.tw/
備註：
如果只要在 http://www.yourweb.idv.tw/yoursite/your.htm 使用，請輸入 http://www.yourweb.idv.tw/yoursite/
那麼所取得的 Key 只會對 http://www.yourweb.idv.tw/yoursite/ 之下的頁面有效。
如果您在 http://www.yourweb.idv.tw/ 所有目錄下使用，請輸入 http://www.yourweb.idv.tw/
如此在 http://www.yourweb.idv.tw/ 之下的所有頁面都可以使用這個 Key。
當然包含 http://www.yourweb.idv.tw/mysxite/ 之下的頁面。
您下次再輸入同樣網址時，出現的 API Key 還是一樣。

3.官方提供的使用程序代碼範例 (Here is an example web page to get you started on your way to mapping glory)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAMjXPFRwPVUT34ElVEbxaxTATQLkw1v6gTWZDRbqEhXlQ01ELRTWTUO_dRlAuruUuSONenDXSTPq5w" type="text/javascript"></script>
<script type="text/javascript">
// function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px"></div>
</body>
</html>
備註：這個程序代碼範例，只是給您套用時參考，您必需另外配合自己的需要修改喔。
範例顯示結果 Go

第四步驟：
您可以點選下方 Google 地圖 API 概念 (Check out the API documentation for more information.) 可進一步瞭解製作方式。
Go
由於 Google 地圖 API 現在已經與 Google AJAX API 加載器集結合，所以可提供更多功能服務，以下就分成幾種方式介紹給大家。
Go 、 Go

More

網頁研習室 - HTML教學 - 電子報教學 - 李文能 - 編輯