這篇文章主要要介紹如何利用 Google Maps API 來把 Google 所提供的地圖服務內嵌到你的網頁中，看過這篇介紹後，你會發現這是多麼簡單的一件事情。如果你有興趣，不妨一起討論討論，或許你也可以想出很有創意的應用來。
目錄：
- 申請一組 Google Maps API Key
- 第一個範例：在網頁嵌入 Google Maps
- 增加其他資訊：Marker，InfoWindow 或是 Polyline
- 瀏覽器相容性問題
- 其他資源
- 版權宣告
申請一組 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，以及一個範例。建議是將範例中的 <script src="..."></script> 整行 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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
//]]>
</script>
</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 中的控制項，沒有這個你沒辦法放大縮小地圖，也沒辦法切換衛星空照圖。如下範例你就可以在你的地圖中加入這兩個控制項：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
//]]>
</script>
</html>
看範例所呈現的結果Google Maps API 內建四種控制項：
- GLargeMapControl : 適合給大型地圖的控制項。
- GSmallMapControl : 適合給小型地圖的控制項。
- GSmallZoomControl : 只有 Zoom Level 的調整，沒有地圖移動控制。
- GMapTypeControl : 顯示地圖型態切換的控制項。
增加其他資訊：Marker，InfoWindow 或是 Polyline
Google Maps API 好玩的地方是在於我們可以在地圖上面加很多東西，API 也提供一些基本的元件，包含你可以標示一個點，顯示資訊，甚至在地圖上畫線。GMarker
先看看下面這個範例：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
map.addOverlay (KyotoStation);
//]]>
</script>
</html>
看範例所呈現的結果我在這個範例中設立了一個 Marker 標示出京都車站的位置，京都車站經緯度取得的方式如前面所述，最重要的是要新增加一個 GMarker 物件，並將此 Marker 物件加入到 map 物件中。你也可以在地圖上標示好幾的 Marker，甚至可以用自訂的 icon 來標示。
Info Window
除了標示地點外，你也可以在 Marker 上顯示額外的資訊。
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
GEvent.addListener (KyotoStation, "click", function() {
KyotoStation.openInfoWindowHtml ("日本京都車站");
});
map.addOverlay (KyotoStation);
//]]>
</script>
</html>
看範例所呈現的結果上面這個程式，在當使用者點了該 Marker 時會出現一個方匡顯示你輸入的文字，這文字可以是 HTML 格式，也就是說允許上面出現圖片等資訊。那可不可以不用去等到使用者點了之後才出現，可不可以在載入時就出現呢？好像是不行的，至少我測試的結果都會得到一些錯誤訊息。不過你可以這樣做：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
map.openInfoWindow (new GPoint(135.761404, 34.982823), document.createTextNode("日本京都車站"));
map.addOverlay (KyotoStation);
//]]>
</script>
</html>
看範例所呈現的結果直接在地圖上顯示 Info Window，而不是在 Marker 上。但是 GMap 物件並沒有 openInfoWindowHtml() Function，只有 openInfoWindow() 可以用，而這個 Function 是以一個 DOM 物件作為參數，而非 HTML 格式的字串內容。
GPolyline
在地圖上畫線，這更酷了，請看以下範例：
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.770159, 34.986128), 3);
var points = [new GPoint(135.762649, 34.984124), new GPoint(135.762563, 34.986128), new GPoint(135.777369, 34.985952), new GPoint(135.778806, 34.990910)];
var line = new GPolyline(points, "#ff0000");
map.addOverlay(line);
//]]>
</script>
</html>
看範例所呈現的結果OK，這個範例要告訴你如何從京都車站搭公車到音羽山清水寺。我設定了一串的 GPoint 物件陣列，每個點都是線條轉折處，並利用此陣列新增了一個 GPolyline 物件，並將這 polyline 加到地圖中即可(你也可以自訂 Polyline 的顏色及大小)。你或許還會注意到這個範例多了一些奇怪的東西，一個 namespace 以及一個 CSS style 設定，這是為了 IE 瀏覽器的相容性而加的，關於這個稍後會再提到。
瀏覽器相容性問題
Google Maps API 基本上沒有什麼瀏覽器相容性的問題，他支援的瀏覽器有：- Firefox/Mozilla
- IE 5.5+
- Safari 1.2+
- Opera
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("mymap"));
map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
} else {
var map = document.getElementById ("mymap");
map.innerHTML = "";
map.innerHTML = "Sorry, 你的瀏覽器不支援 Google Maps";
}
//]]>
</script>
</html>
看範例所呈現的結果另外，如果你有用到 GPolyline 物件，為了能夠在 IE 上也能夠正確顯示，你必須引用微軟的 VML namespace 以及增加一個 CSS Style 來正確顯示 VML，關於這個請參考：http://msdn.microsoft.com/library/default.asp?url=/workshop/author/VML/ref/appendix.asp，但是如果是只針對 Firefox/Mozilla 等瀏覽器則無此困擾。
其他資源
- Google Maps API
- 討論群組
- 看看網路上其他 Google Maps 應用：Goole Maps Mania
- A Google Maps Extension - TLabel
