2013年7月16日 星期二

利用 Google MAP API & KML 製作地圖標記

一、 Introduction
    Google Map 是這幾年 Internet 上一個很重要的服務, 它不但改變我們查閱地圖的習慣, 甚至改變我們對於地圖傳統的印象, 因為它的附加服務已不是單純的告訴你那裏是那裏, 而透過地圖的顯示搭配著更多的資訊提供. 例如像交通狀況, 附近景點等. 當然也包含了我們自己定義的景點及位置.
    使用過 google map 的人都知道, 我們可以透過 map 所提供的功能建立自己的地圖, 在這建立的地圖上, 我們可以使用 marker 並加上說明. 製作地圖的方式, 除了透過地址或衛星座標找到目的地之外, 若是有大量的資料需要輸入, 還可使用 KML 的檔案方式使用匯入的方法建立 marker.
    這篇文章的目的就是在說明如何使用 KML 檔案的方式搭配 google map API 完成一個自定義的地圖網頁.
二、相關背景
    Google 提供的 API 種類非常眾多, 而 API 的啟用, 請參考前面文章『Google Map API 啟用及 API 金鑰取得』中有大概提到.
    KML (Keyhole Markup Language) 是 XML 這類別人的一種, 主要用來表達地理座標及相關資訊, 詳情請參考 Wiki KML. 順帶一題, 它的壓縮檔格式為 KMZ.
三、KML 檔案製作
   因為這次網頁的目的是要將我內人及我曾拜訪過的台灣319個鄉鎮市公所的照片製作成地圖, 因此, 我要使用這些照片有的 GPS 座標及日期來製作 KML 檔案. KML/KMZ 的檔案如何產生呢? 基本上有很多 KML/KMZ 產生的軟體, 這次既然是做 google map 的應用, 我就使用 Google 的 Picasa 及 Google Earth 兩套免費軟體, 用它來產生 KML/KMZ 檔.
1. 用 Picasa 製作含有照片資訊的 KMZ 檔 
(1) 首先, 執行 Picasa, 選擇你地圖中要使用的相片, 當然這些相片都有 GPS 的資料在其中(若你的相片不含有GPS 的資料, 你可以參考前面我寫的『如何在沒有 GPS 資訊的相片上附加 GPS 資訊』一文加入你的座標), 當你選好後點選軟體右下方image符號, 你可以看見你的 marker  出現在右邊地圖上.
image

(2) 接著由功能表中的[工具]選項中選擇[地理標記]中的[匯出為『Google 地球』檔案]
image
(3) 系統會要求你儲存成  KMZ 檔. 這個 KMZ 檔會將你的相片及相片的相關資訊全部都放在一個檔案中, 當然, 這檔案的大小會跟著你的相片數量而改變.
image
(4) 若你是不使用[匯出為『Google 地球』檔案], 而是直接用[在 Google 地球中』檢視], 那你會在 google earth 中看到像下面的畫面.
image
2. 執行 google earth 載入 KMZ 檔
   (1) 執行 google earth, 由功能表的[檔案]中選[開啟], 將 picasa 製作好的 KMZ 檔案載入
image
(2) 你會發現 earth 會將你的相片用縮圖的方式呈現在對應的座標上
image
(3) 在軟體的左邊[位置]的地方, 你會看到在[暫存位置]處有載入的 picasa 相片的清單
image
(4) 在你的相片資料夾清單上(本例是在 Picasa-2013年7月16日 319+GPS information)上按下滑鼠右鍵, 選擇[將位置另存為....]
image
(5) 給定檔名, 檔案類型修改選 .kml . 這樣 earth 就會將你的地理資訊寫到  KML 中, 同時會將所需的相片檔案及縮圖一併放在儲存的資料夾中.
image
image
(6)我們來看一下產生出的 KML 檔的內容, 舉幾個重要的 tag 來解釋
   學校<IconStyle> 的標籤主要是用來顯示在地圖上的圖示要用什麼圖形檔案來表達
image
學校在地圖上的圖形 icon 上按下會有什麼內容顯示會使用 <Placemark> 這標籤來敍述.
image
四、google map API 與 KML 的結合
      在 Google map API 的網站說明文件中, 有說明及範例如何在網頁中使用 KML 的 API, 大家直接參考範例照抄即可. 將那 KML 檔換成你自己的 KML 檔即可.
      記得寫在網頁中之後, 發佈網頁時要將你的 KML 檔案中的圖片路徑再確認一次, 不要是因為路徑不對而找不到圖. 同時 KML 檔案中寫到的圖形檔都要一併發佈上去.
      KML 的圖層選項說明文件 URL 如下, 中文顯示, 應該可以看的懂的
(1) https://developers.google.com/maps/documentation/javascript/layers?hl=zh-tw#KMLLayers
(2) https://developers.google.com/maps/documentation/javascript/examples/layer-kml?hl=zh-tw
五、實作結果
     我的這一份地圖中含有的照片數為 330 張. 當我使用 google earth 所製作的 KML 檔時, 是看不到結果, 當時一直以為我那裏有設定錯誤並寫錯. 後來我試著將照片數量下修(先試了幾十張, 一直到兩百多張), 結果是正常的. 底下圖是拿掉 30 多張照片後可以顯示的結果.
image
      但只要數量一超過, 就完全無法顯示. 一張照片都沒有. 我一直以為是我的 KML 檔案太大或超過 google 規定的限制(請參考 google 的  KML 檔限制), 檢查後發現我的 KML 大小才 600 多KB, 離限制的 3MB 還很遠. 於是在網路上翻遍各式文件及別人寫的範例, 發現人家可以標到上萬的 markers, 很顯然的, 我的問題不是照片數量的問題.
      經過兩三天的 survey 之後, 我最後使用別的軟體製作出的 KML 檔案與我由 google earth 上產生的檔案一比之後發現, 我只要不使用照片縮圖做我的 marker, 而使用原來 google 使用的image這原來 marker 的符號, 就沒這問題了. 所以我將KML 檔中的 <IconStyle>全拿掉就完成了. 原來 google map 對使用自己定義的 icon 圖形有數量上的限制.
      新做好的網頁如下, 全部的照片都上去了. 下次有空我再改另一種顯示的版本.

馬嫂與MacGyver的319走透透

image

今天寫到這裏, 好...下課....