Google Map 的中文製作簡介

這裡是 Google Map 的中文製作簡介. (修正適用於 v2)

回到首頁

別忘了, 你可以利用瀏覽器上的 "檢視" -> "原始檔" (Internet Explorer) 或 "檢視" -> "此頁原始內容" (Firefox), 來觀看程式.

首先, 你必須要有一個 Google 地圖 API 的 key. 你可以在這裡獲得.
比如你想要把 Google 地圖放在 http://www.mysite.com/googlemap/ 這個位置, 那你就用這個網址去申請你的 Google 地圖 key. 如果你有另一個地圖是在 http://www.mysite.com/myplace/ 另一個網址, 那你就需要另外再申請一個.
當場系統就會給你一個 Google 地圖的 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=2&key=ABQIAAAALQLptqCWLmFKG0qlkrSzvxTDZhN5Z68036oF1fJZP55mzcclPhTMG5I1IWvCOU0JHc2eYOxKR1uFnw" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
//]]>
</script>
</body>
</html>
紅色的部份就是你的 Google 地圖 key, 這字串要放在你有 Google 地圖的網頁 <head> 和 </head> 欄之間. (事實上也可以放在其他地方, 但是不要製造混亂, 還是固定的放在 <head> 和 </head> 欄之間才不會弄錯).
你可以直接下載範例(別忘了更換你的 Google 地圖 key).
這個 Google Map 簡介已經升級至 v2 的版本. 以下是最大的不同.
1. 使用 v2 版本時, API 的 key 要註明是 v=2, http://maps.google.com/maps?file=api&v=2&key=abcdefg. 第一版是 v=1.
2. GMap 改成 GMap2.
3. v1 版本可以放 setMapType 在 centerAndZoom 之前. v2 版本已經不可以這麼做.
4. Google 建議改使用 setCenter, 而不要使用 centerAndZoom.
  1. centerAndZoom(GPoint(緯度, 經度), [+ 縮小(遠)] -> [- 放大(近)]);
  2. setCenter(GLatLng(經度, 緯度), [+ 放大(近)] -> [- 縮小(遠)]);
5. 舊名 G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPE 改成 G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP.
這裡稍微的解釋一下. 有解釋的部份表示需要注意或可以任意的更改.
1. <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALQLptqCWLmFKG0qlkrSzvxTDZhN5Z68036oF1fJZP55mzcclPhTMG5I1IWvCOU0JHc2eYOxKR1uFnw" type="text/javascript"></script>
  這個是你專屬的 Google 地圖 Key. 如果你沒有或是有錯誤的 Google 地圖 Key, 那網頁就會出現這種錯誤, 並無法執行.
2. <div id="map" style="width: 500px; height: 400px"></div>
  這個是顯示地圖大小的設定. 你可以隨心所欲的更改地圖的寬度 (width) 和高度 (height). 比如像這樣更改寬度和高度到 800.
3. var map = new GMap2(document.getElementById("map"));
  第一個 'map' 是程式的定義. 用於程式內. 如果是 var happymap = new GMap2(document.getElementById("map"));, 那下面的程式都必須是 happymap, 像這樣 happymap.addControl(new GSmallMapControl());, 和 happymap.addControl(new GSmallMapControl());
  第二個 'map' 是地圖顯示的定義. 用於顯示地圖. 如果上面第二點的 id 是 <div id="taipei_map" style="width: 500px; height: 400px"></div>, 那這裡就是 var map = new GMap2(document.getElementById("taipei_map"));
  如此的定義是讓網頁可以同時顯示兩個以上的地圖.
4. map.addControl(new GSmallMapControl());
  這裡是讓你可以自由的加入喜好的地圖控制. GSmallMapControl 的位置可以有四種的替換可能, GLargeMapControl, GSmallMapControl, GSmallZoomControl 和 GMapTypeControl.
  其中 GMapTypeControl 可以和其他三個混合使用.
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  但其他三個 (GLargeMapControl, GSmallMapControl, 和 GSmallZoomControl) 你只可以選其一.
map.setCenter(new GLatLng(37.4419, -122.1419), 9);
這是初始地圖的顯示位置和縮放大小設定. 比如把台北火車站當做初始地圖的顯示位置, 並設定縮放大小為 9 (可以從 0 到 17 設定).
由於台灣並沒有道路地圖在 Google 地圖上, 因此一般預設的地圖顯示是沒有意義的. 因此可以直接設定為空照圖顯示(台北火車站為中心). map.setMapType(G_SATELLITE_MAP) 或簡短一些 map.setCenter(new GLatLng(37.4419, -122.1419), 15, G_SATELLITE_MAP);
Google Map API 第二版新增了 GOverviewMapControl.

這樣差不多就是最基本的了. 下面是如何在地圖上放置標點.

這裡是介紹如何放置標點.

直接從地圖上找(連結).
直接輸入地址來顯示經緯度(連結).
直接輸入經緯度二度分帶: 連結.
轉換一般經緯度到 TM2 二度分帶
只適用於美國和加拿大. 我們可以利用微軟的 TerraServer. 當地圖顯示時, 左側也會顯示其經緯度. TerraServer 的好處是可以直接看到衛星圖, 確認其位置.

台北火車站: 經度: 25.047795, 緯度: 121.516900
中正紀念堂: 經度: 25.034730, 緯度: 121.521481
桃園國際機場: 經度: 25.081479, 緯度: 121.237371

Google 地圖 API 網站有一個簡單的網頁上隨意丟入 10 個標點的範例. 我們可以從這個範例, 套入我們剛剛找到的位置(連結).
當然, 我們希望當用滑鼠點位置時, 可以顯示一些位置的資訊(連結).
顯示的位置的資訊是一般的 HTML 網頁編輯, 因此你可以隨意的放入你喜歡的連結或照片(連結).

畫線的部份

接下來是畫線的部份. 這個是 Google 地圖提供的範例. 範例裡是隨意的連接 5 個點. 同樣的方式, 我們就連接我們有的 3 個點(連結), 或是畫一個桃園中正機場和西雅圖 Sea-Tac 機場間的大圓航線. 最後, 這是畫線用的連結.

由於 Google 地圖 API 還是測試版本, Google 地圖 API 英文討論區裡有不少抱怨, 有些 Internet Explorer 並沒有辦法顯示.

XML 和 Asynchronous RPC 的方式

最後一個部份是利用 XML 的方式, 一次讓大量的標點顯示在 Google 地圖上. 比如下個例子顯示機場的位置(連結).

基本就是這樣而已, 其他還有一些可以製作更多變化的, 就是要靠自己了. 目前並沒有台灣 Google 地圖 API 的中文線上討論, 不過有香港和簡體中文的線上討論. 如果你知道那個網站上有台灣的線上討論, 煩請通知一聲. 謝謝!