在 Google 推出 Google Maps 之後，網路上出現各種 hack 網站及文件，討論如何直接從 Google Maps 的 CGI 取得地圖圖檔並推出自己的地圖服務，但是這類的網站對 Google 的負荷很大，例如前不久的 Google Maps Wallpaper 即是，大量無節制的下載圖檔，Google 沒多久就將他封殺了，而且各式 hacking 的程式良莠不齊，所以 Google 就乾脆自己推出 API 程式庫讓全世界對 Google Maps 有興趣的程式設計師能夠自行開發 Google Maps 服務，而且 Google 也可以透過 API 來對這些服務做一個控管。
這篇文章主要要介紹如何利用 Google Maps API 來把 Google 所提供的地圖服務內嵌到你的網頁中，看過這篇介紹後，你會發現這是多麼簡單的一件事情。如果你有興趣，不妨一起討論討論，或許你也可以想出很有創意的應用來。
申請一組 Google Maps API Key
在使用 Google Maps API 之前，你必須向 Google 申請到一組 Key，申請的方法很簡單：- 首先，先決定你的網頁會出現在哪個 URL， 例如我想把 Google Maps 嵌入到我的 blog 中，我可以先知道該網頁的 URL 應該會是 http://blog.yam.com/syshen/archives/XXXX.html，前面包含到最後一個目錄的字串便是要來申請 Key 的基準，也就是 http://blog.yam.com/syshen/archives/。
- 以你的帳號登入 Google，如果你還沒有帳號，請到 https://www.google.com/accounts/ 申請。
- 連到 Google Maps API Sign Up 網頁將 (1) 所決定的 URL 填入，並按 "Generate API Key" 取得 Key。
- 最後會出現三個方塊，分別是你取得的 Key，你指定的 URL，以及一個範例。建議是將範例中的 整行 Copy/Paste 下來。
Goole Maps API 使用上有些法律上的限制要注意：
- 你的 Google Maps 服務必須免費開放給一般使用者。
- 如果你預估你的地圖服務會有超過每天 50,000 筆頁面的存取量，請主動聯絡 Google。
- Google 會不定期更新 API，你有責任跟著更新你的網頁中的 API。
- 你不能更改或隱藏 Google 的 logo。
- Google 有權力以後在地圖上放廣告，而你不能更改或破壞這些廣告。
- 有些地圖應用是 Google 不希望看到的，例如指明哪些地方可以購買到毒品或是任何違法行為。
第一個範例：在網頁嵌入 Google Maps
當你取得一把 API Key 之後，我們就可以來寫第一個範例了，這個範例相當簡單：<!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</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
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>
紅字的部分就是用你取得的 Key 去載入 Google Maps API，這裡要注意的是，你一定要用你自己的 URL 去取得這把 Key，否則網頁在載入時，會得到錯誤訊息。接下來，宣告一個 div 區塊用來擺置地圖，style="width: 300px; height:300px" 則是用來指定地圖區塊大小。
再來利用 var map = new GMap (document.getElementById("mymap")); 宣告一個 GMap 物件。而 map.centerAndZoom(new GPoint(139.7600, 35.6700), 1); 則是將地圖的中心點固定在經度 139.7600 和緯度 35.6700，而 Zoom Level 在這範例中設成 1 (1 為最大，數字越大 Zoom Level 越小)。在這邊你或許會有個疑問，要怎麼知道某個地點的經緯度？如果你是在美國或加拿大，有些網站會提供依照地址查詢經緯度的服務，但是其他國家就比較麻 煩了，而我有個比較簡單的方法你可以參考看看，也就是先利用 Google Maps 的大地圖找到你要的地點，將他固定在中間，然後按下網頁上的 Link to this page，這時候 Google Maps 就會顯示出這頁的 URL，URL 上就有該點的經緯度了，舉例來說，我想要找出日本京都車站的經緯度，我先用 Google Japan Maps 找到車站位置，並將他固定在中心，最後並取得連結：http://maps.google.co.jp/maps?ll=34.982050,135.761490&spn=0.012443,0.020262&hl=ja，紅字所標的就是京都車站的經緯度。
這個範例中，你有沒有覺得是不是少了什麼？那就是少了 Google Maps 中的控制項，沒有這個你沒辦法放大縮小地圖，也沒辦法切換衛星空照圖。如下範例你就可以在你的地圖中加入這兩個控制項：
var map = new GMap2(document।getElementById("map")); //這一行是建立地圖元件
map . addControl(new GSmallMapControl()); //這一行是建立小地圖地圖縮放控制項
map . addControl(new GMapTypeControl()); //這一行是建立地圖種類控制項
map . setCenter(new GLatLng(37।4419, -122।1419), 13); //這一行是地圖的中心點左邊的是經度右邊是緯度最右邊的13是大小
今天就先打到這接下來就看各位有沒有與趣了解更多了。