syshen's blog

關於部落格
我不想限定我的 blog 方向,但是在這裡的都是我最認真的紀錄。
  • 63866

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

Google Maps API 簡易使用文件

目錄:

申請一組 Google Maps API Key

在使用 Google Maps API 之前,你必須向 Google 申請到一組 Key,申請的方法很簡單:
  1. 首先,先決定你的網頁會出現在哪個 URL,例如我想把 Google Maps 嵌入到我的 blog 中,我可以先知道該網頁的 URL 應該會是 http://blog.yam.com/syshen/archives/XXXX.html,前面包含到最後一個目錄的字串便是要來申請 Key 的基準,也就是 http://blog.yam.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 等瀏覽器則無此困擾。

其他資源



版權宣告

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