August 7,2005

Google Maps API 簡易使用文件

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,申請的方法很簡單:
  1. 首先,先決定你的網頁會出現在哪個 URL,例如我想把 Google Maps 嵌入到我的 blog 中,我可以先知道該網頁的 URL 應該會是 http://blog.roodo.com/syshen/archives/XXXX.html,前面包含到最後一個目錄的字串便是要來申請 Key 的基準,也就是 http://blog.roodo.com/syshen/archives/。
  2. 以你的帳號登入 Google,如果你還沒有帳號,請到 https://www.google.com/accounts/ 申請。
  3. 連到 Google Maps API Sign Up 網頁將 (1) 所決定的 URL 填入,並按 "Generate API Key" 取得 Key。
  4. 最後會出現三個方塊,分別是你取得的 Key,你指定的 URL,以及一個範例。建議是將範例中的 <script src="..."></script> 整行 Copy/Paste 下來。

Goole Maps API 使用上有些法律上的限制要注意:
  1. 你的 Google Maps 服務必須免費開放給一般使用者。
  2. 如果你預估你的地圖服務會有超過每天 50,000 筆頁面的存取量,請主動聯絡 Google。
  3. Google 會不定期更新 API,你有責任跟著更新你的網頁中的 API。
  4. 你不能更改或隱藏 Google 的 logo。
  5. Google 有權力以後在地圖上放廣告,而你不能更改或破壞這些廣告。
  6. 有些地圖應用是 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
除此外,你也可以利用 GBrowserIsCompatible() 函式來檢查使用者的瀏覽器是否有相容性上的問題。例如,你可以這樣做:
<!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 等瀏覽器則無此困擾。

其他資源



版權宣告

本文內容為作者(沈時宇)所有,本文內容及資料,僅提供給個人從事非營利的學術研究或參考,嚴禁以任何方式做全部或局部的改寫、轉載、重製或販賣等違反著作權的行為,若有違者,必當追究。

Posted by syshen at 樂多Roodo! │09:48 │回應(30)引用(2)Programming
樂多分類:網路/3C 共同主題:GoogleMaps Sightseei 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/347151
引用列表:
連結到geocities 筆記: 看了一下syshen's blog 和 薄荷blog 隨意做了簡單的高雄西子灣(挺醜的) g
google api test【k j !】 at August 25,2005 16:12
syshen's blog:Google Maps API 簡易使用文件
HEMiDEMi - 共享書籤【HEMiDEMi】 at March 6,2006 21:06
回應文章
Google Maps Supports the function "openInfoWindowHtml()"
Posted by QQS at September 25,2005 21:51
Hi, syshen, 看到你寫的blog裡面 暗示 台灣的地址沒辦法直接查詢經緯度
建議你試試看 MMap
輸入中文地址就可以給你經緯度、地圖、和空照圖
並自動連結到google map喔!
Posted by Mr. M at September 30,2005 02:53
巨細靡遺~~
小弟佩服...
Posted by SpongeBob at October 11,2005 10:45
原本打算写一篇关于Google Maps API的文章,意外的发现了这里;看来没必要了 :)

http://slashdotcn.org/article.php/20051015152129989
Posted by errorter at October 16,2005 02:59
你好!
我看了你的文章想照着做一个类似的东西,也申请到了API key ,接下来该写代码了。但我什么都不懂,不知道代码该写到哪里,代码应该写到哪里呢? 希望能得到你的指点和帮助。谢谢了!
我的联系方式是:whsb520@163.com
期待你的回复。
Posted by whsb520 at January 6,2006 15:35
写得非常好,给Google Map API 的学习者提供了最好的中文资料。
Posted by 楚影_xcly at March 7,2006 09:36
好棒的說明
Posted by Mapart at June 8,2006 14:59
Posted by Hoodia at June 26,2006 05:04
Posted by Buy diazepam at July 2,2006 00:04
Posted by Celexa at July 26,2006 09:47
用 Google Earth 可以直接得到經緯度座標
Posted by T.C. at November 25,2006 01:31
向大家請教一下,blogspot.com可以作的進去嗎?因為我看不懂網頁程式碼,只會將申請到的Key貼到blogspot的範本中,但是網頁沒有顯現出來....請教一下了....謝謝!
Posted by Look at January 26,2007 00:38
blogspot 是 Google 自家產品,所以我想一定沒問題,試著使用 Firefox 的 javascript console 有無任何錯誤訊息,有可能是你哪裡寫錯了,但是沒發覺而已。
Posted by syshen at January 31,2007 16:24
你好,謝謝你的教學文,
我可以成功依此製做出一嵌入了 Google Maps 的網頁。

但想請教個問題,
如果我在網路空間放了一個 KML 檔,該 KML 是顯示出一條路徑圖,
我想把這條路徑圖顯示在 Google Maps 上,並且嵌入到 "Blog" 的某篇文章裡頭,
應該怎麼做呢? (我已經申請了 Google Maps API)
Posted by Airbolt at July 10,2007 17:11
Hi Airbolt,

謝謝你的稱讚。
不過目前你的問題是需要自己寫程式來實做的,不過有個省事的作法,你可以連結到 GPS Visualizer (http://www.gpsvisualizer.com/map?form=google) 這個網站,上傳你的 KML 檔,它會幫你產生一份 Google maps 網頁,用瀏覽器看他的程式碼,Copy 應該 Copy 的部分,在貼到你的部落格當中。
Posted by syshen at July 11,2007 16:00
Hi Airbolt,

不過要記得把 API Key 換成你自己的
Posted by syshen at July 11,2007 16:01
請教,可否實作一個放在blog的 Google Maps API ?我試了幾次皆告失敗。目前我的作法是將 Google Maps API 放在 free space ,然後用 iframe 放在 blog 裡。(註:這裡的 API Key是指向 free space 的 )然而,我想看看您是如何在blog裡放 Google Maps API ? 您這篇所實作的範例,好像也都是放在您的個人空間裡的?感謝。
Posted by shutter at July 19,2007 11:29
直接放置在 Blog 的方式,我試了好多次都失敗了,
後來想到了另一種折衷方式,應該這兩天會完工,
(只能用晚上空閒時間慢慢編輯)
屆時再跟大家分享一下。
Posted by Airbolt at July 20,2007 00:40
Hi shutter and Airbolt,

看看我這篇的作法吧: http://blog.roodo.com/syshen/archives/277724.html

基本上需要你的 BSP 允許你使用 javascript
Posted by syshen at July 20,2007 01:56
Hi syshen,

我使用的是 Yam 的 Blog 空間,我在文章區貼上原始碼如下:
+++++++++++++++++++++++++++++++++++++++

<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUUcz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
<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>

+++++++++++++++++++++++++++++++++++
可是依然無法出現地圖畫面,是因為 Blog 空間關係嗎? 還是我的語法錯誤、短缺呢?
Posted by Airbolt at July 21,2007 12:17
感謝syshen!看過http://blog.roodo.com/syshen/archives/277724.html以後,終於明白問題出在哪裡了。
我在Xuite,這是測試結果:http://blog.xuite.net/shutter/home/12682505
(不好意思,借用一下座標)
感謝。





//
Posted by shutter at July 21,2007 12:24
另外,我提供一下我的另一比較間接的做法:
1. 在 Google Page Creator 上傳 KML 檔
2. 在 GPS Visualizer 產生 html 檔,並修改為自己適用的
3. 在 Google Page Creator 上傳該 html 檔
4. 在 Blog 中,使用語法 <iframe></iframe> 將存放在 Google Page Creator 的該 html 檔給嵌入進來即可。

不過這個做法得要「Blog 空間」、「Google Maps」、「GPS Visualizer」、「Google Page Creator」四個 Server 都存活著才行,算是滿有風險的。
Posted by Airbolt at July 21,2007 12:25
Hi Airbolt,
我不確定你問題的原因,post 後,用瀏覽器看一下原始程式碼,看看是不是 yam 有安插一些標籤如
或者是不是自動幫你轉換 < > 等字元
Posted by syshen at July 21,2007 12:42
更正一下,我在留言中的 <> 全部被我轉成全形了,因為我怕 Blog 空間會把我的留言給視為語法,直接產生作用。

另外我是從 roodo 轉成 yam 的使用者,所以在 roodo 也有 Blog 空間可以測試,可否提供可以直接貼上的原始碼,我再做一下測試看看。
Posted by Airbolt at July 21,2007 12:50
依syshen 給的提示,我實際測試後發現,日本地圖可以,但在台灣地圖上卻無法正常顯示。打開第一次製作的檔案(〝Google Maps 怎麼玩 ? 〞),兩相比較後,發現第三段〝GMap〞與〝GMap2〞有異,再到〝Google Maps API Documentation〞查尋,發現都是用〝GMap2〞,而且GPoint也改成GLatLng了,這應該是Google Maps API 升級了吧!再經過修改後實測,台灣地圖即可正常顯示了。又,在map.setCenter(new GLatLng(24.008904, 120.64412), 16);後的數字越大,地圖顯示比例越大,也與第一版不同。

我也寫了一件筆記,放在這裡:http://blog.xuite.net/shutter/home/12690390

註:辛苦了一個星期,總算將這個問題搞定,syshen,謝謝你寶貴的提示。
Posted by shutter at July 22,2007 04:02
原來如此,這篇 blog 已經是兩年前的文章了,用的是 Google Maps 1.0 的 API ,真的有點舊了
Posted by syshen at July 22,2007 09:22
雖然小弟尚未能成功使用這樣的語法,
只能用 的間接方式,
只是又遭遇到在某些電腦上的 IE 無法瀏灠的問題,
而 Firefox 則無此問題。
不過我還是會繼續努力研究怎麼克服並完成這兩種語法,
謝謝兩位的分享。
Posted by Airbolt at July 25,2007 10:02
請問我要在地圖上顯示多個點
Info Window這ㄍ
目前只能用一個點嗎
Posted by ken at August 29,2007 09:51
原來如此,這篇 blog 已經是兩年前的文章了,用的是 Google Maps 1.0 的 API ,真的有點舊了
Posted by sdf at June 6,2008 18:02
淺顯易懂....讚!!
Posted by 呆呆怡 at March 12,2009 16:45