使用 Google Map SDK 或使用 Google Map App 的 URL Scheme 並透過 Deep Link 這個動作來達到繪製地圖的效果
如果哪一天 App 內要繪製地圖的話，除了使用 Apple 內建的地圖外，還有另一個選擇，那就是 Google Map，而法蘭克今天就要來介紹如何使用 Google Map SDK 或是使用 Google Map App 的 URL Scheme 並透過 Deep Link 這個動作來達到繪製地圖的作法。話說這兩個有什麼不一樣呢？前者，直接在當前的 App 內掛載 Google Map View，並可透過 Google 所提供的 SDK 來客製化地圖，也就是說可以隨意的在地圖上打點、劃線等等；後者，透過一長串的 URL 直接從當前的 App 內開啟 Google Map App，這個動作稱之為 Deep Link。
講到這邊我相信大家對 Google Map 或許有些懂，但又不是很懂，沒關係，繼續往下看。而今天在開始說明前，先來設定一個情境比較好發想！假設呢，哪天老闆突然說，想在 App 內新增一個功能，該功能點選之後，會有一地圖，而地圖上顯示出公司的位置，這聽起來還好！那如果老闆要的是除了公司的位置外，還要有使用者當前的位置，還有將公司位置的 Marker 換成天殺的各式各樣的圖，甚至還要將路線規劃出來的結果路線換成他喜歡的顏色等等等等…一些特殊需求。我想….如果對地圖的使用上沒什麼概念的，聽到的當下一定覺得很頭大，甚至有可能會失眠個好幾天，別擔心，法蘭克最終就是希望看完這篇文章能給大家點頭緒。
針對老闆的需求來看，在地圖上顯示出公司的位置，或者是幫使用者依運具規劃出到公司的路線等等，這都不會太難，兩種做法都可以達到，使用 Google Map 的 URL Scheme 更是簡單快速，但是，如果老闆想要換掉 Marker 或將路線的線條換成其它顏色等等這些需求，這就得必須使用 Google Map SDK 了，就端看於老闆想要什麼了。最後，法蘭克統整一下，如果老闆想要有基本的地圖功能，就使用 Google Map URL Scheme 就好了；如果想客製化地圖上的 Marker、路線顏色、甚至要客製點擊 Marker 所要呈現的訊息視窗這種特殊需求時，就只能使用 Google Map SDK 了，雖然學習成本較高，但彈性相相對大，如果再搭配 Google Directions Web API，更可得知此路線點跟點之間 Google 給的建議交通方式。講了那麼多，該是動動手來實作囉。今天法蘭克要講解的是使用 Google Map App 的 URL Scheme 和 Google Map SDK 打點、劃線等等，而 Google Directions Web API 僅會稍為提一下，容我下次有時間再讓我補上唄😀
大綱
- 使用 Google Map SDK 在地圖上打點。
- 使用 Google Map SDK 在地圖上打點並繪線將點位連接。
- 使用 Google Map App 的 URL Scheme 開啟 Google Map App。
- 簡介 Google Map Web API(Google Directions API)。
前置作業
- 認識 Google Map 的元件和專有名詞
- 透過 CocoaPods 安裝 Google Map SDK
- 取得使用 Google Map SDK 的金錀
認識 Google Map 的元件和專有名詞
下圖共有四個元件，分別為背景地圖、看地圖的視角、大頭針、藍線等等。
- GMSMapView => 背景的地圖。
- GMSCameraPosition => 看地圖的視角，可放大(zoom in)、縮小(zoom out)。
- GMSMarker => 點位，即地圖上的大頭針。
- GMSPolyLine => 折線，代表一連串的位置順序，用來繪製 Marker 和 Marker 之間的曲線。
透過 CocoaPods 安裝 Google Map SDK
除了使用 Google Map App 的 URL Scheme 開啟 Google Map App 外，其它的教學都須要安裝 SDK 的，所以在開始之前先裝起來等吧！
▼打開終端機並將路徑切換至專案下
▼鍵入「pod init」產生 Podfile
▼打開 Podfile 並加入載入 Google Map SDK 的語法
▼打開終端機 cd 將路徑切至專案下並執行「pod install」
取得使用 Google Map SDK 的金錀
上圖是法蘭克在 Google 後台所看到的金錀列表，這意味著每種 Google 提供的服務都會有一組金錀，像是圖上的 Google Map SDK for iOS、Google Places SDK for iOS、Google Directions API 等等，眼尖的各位不曉得有沒有發現 Google Directions API 竟然沒有分平台！其實，它就像是一支後端人員提供的一支 API 如此而己，所以當然沒有分平台，但呼叫它時也得必須帶入金錀才可呼叫的喔！而今天的教學只會使用到 Google Map SDK for iOS 這個金錀而己。在申請金錀前，別忘了請先申請 Google 帳號。以下就開始透過幾個簡單的步驟來申請 Google Map SDK for iOS 的金錀吧😀😀😀
▼手冊 → 取得 API 金錀→ 取得金錀
▼輸入專案名稱
以上看完有一點概念後，就開始真正來實作囉！而今天的範例都會使用 Single View App 的專案來做說明，且範例跟範例之間都算是一個新的開始，也就是說每個範例都可以算是一個新的專案😀😀😀
實作
使用 Google Map SDK 在地圖上打點
在地圖上打一個台北 101 的點，我們將會使用到 GMSMapView、GMSCameraPosition、GMSMarker 等三個元件來實作之。
▼在 AppDelegate 的 application(_:didFinishLaunchingWithOptions:) 加入透過金錀來註冊 SDK 程式碼
▼在 AppDelegate 匯入 GoogleMap SDK
▼在 ViewController 加入以下程式碼
第 12 行 => 生成 GMSCameraPosition 並傳入台北 101 的經、緯度，鏡頭的焦距等等參數。可試著調整 zoom 的參數大小會比較有感喔。
第 15 ~ 17 行 => 生成 GMSMapView 並開啟我的位置設定，最後將 GMSCameraPosition 掛載至 GMSMapView 上。
第 21 ~ 25 行 => 生成台北 101 的 GMSMarker 並掛載到 GMSMapView 上，即地圖上看到的大頭針。第 23 和 24 行則是點擊大頭針所顯示的文字。
試著啟動模擬器執行，若是無法正常顯示則有可能是金錀不正確所致
使用 Google Map SDK 在地圖上打點並繪線將點位連接
實作方式同「使用 Google Map SDK 在地圖上打點」，不過在這裡要再多打一個點，並且繪線將點跟點連接，所以相對於「使用 Google Map SDK 在地圖上打點」，這裡只會多出一個新的元件。
▼在 ViewController 加入以下程式碼
以上這段程式碼相對於上個範例，只多了一個點位、一條折線，還有在 viewWillAppear(_:) 上作些額外的處理。
第 13 行 => 生成 GMSCameraPosition 並傳入台北 101 的經、緯度，鏡頭的焦距等等參數。可試著調整 zoom 的參數大小會比較有感喔。
第 16 ~ 18 行 => 生成 GMSMapView 並開啟我的位置設定，最後將 GMSCameraPosition 掛載至 GMSMapView 上。
第 22 ~ 33 行 => 生成台北 101 和台北車站的 GMSMarker 並掛載到 GMSMapView 上，即地圖上看到的大頭針。第 24 和 25 行則是點擊大頭針所顯示的文字。
第 36 ~ 38 行 => 生成 GMSMutablePath 並將台北 101 和台北車站的座標加入該 GMSMutablePath 中，然後生成 GMSPolyline 並其掛載到 GMSMapView 上 ，即地圖上看到的藍色線段。
第 45 ~ 50 行 => 調整 camera 讓 polyline 的能見度完整顯示在 GMSMapView 上。這段邏輯一定要放在 viewDidLayoutSubviews() 之後才能正確的顯示出結果，因為執行完 viewDidLayoutSubviews() 才代表 UI 已繪製完。
使用 Google Map URL Scheme 開啟 Google Map App
該範例相對於前兩個範例來說相對簡單許多，因為我們要做的事情就是使用 open(_:options:completionHandler:) 來開啟 Google Map App 的 URL Scheme 如此簡單而己。在這之前，我們得必須先來配置 info.plist 檔，加入此設定才能判斷使用者是否有安裝 Google Map App。
▼配置 info.plist
▼在 viewDidLoad() 加入以下程式碼
第 1 行 => Google Map App URL Scheme 的 URL，omgooglemaps://? 為固定的字段，?之後為要帶入的參數。
- saddr：設定路線搜尋的的起點。 這可以是「緯度,經度」，或是查詢格式的地址。 如果它是傳回多個結果的查詢字串，則會選擇第一個結果。 如果值是空白，則會使用使用者的目前位置。
- daddr：設定路線搜尋的終點。 具有與 saddr 相同的格式與行為。
- directionsmode：運輸方法。 可以設定為：driving、transit、bicycling或 walking。
第 3 行 => 判斷使用者手機是否有安裝 Google Map App。若沒有在 info.plist 配置參數，此行永遠會回傳 false。
第 7 ~ 8 行 => 將畫面導到 App Store 上 Google Map App 的地方。
簡介 Google Map Web API(Google Directions API)
在金錀申請的章節中有提到 Google Map Web API 是得必須獨立申請的，在這邊就不介紹申請的流程，申請的步驟大同小異，在這邊把重點放在 Google Map Web API 的說明。在文章一開始，法蘭克有提到老闆的需求也可以使用 Google Directions API 搭配 Google Map SDK 來解，因為這樣的做法彈性相對大很多很多，我們可以依照 API 回傳給我們的資料客製自己的 UI，為什麼這樣說！？因為 API 回傳的格式長相根本就是跟我們在使用 Google Map App 規劃路線時是一樣的！或許法蘭克這樣說大家還是一頭霧水，沒關係，立馬來舉個例子來說明。以下是法蘭克使用相同的條件來測試 Google Map App 和 Google Directions API。
▼使用開車的方式規劃從目前位置到 101 的路徑圖
圖的左上為 Google Map App 規劃出的路線，右下為 Google Directions API 回傳的資料格式，不難看出它們長得根本超像，所以由此大概可以猜出，Google Map App 也是透過 Google Directions API 來規劃路線的！
結論
Google Map SDK 法蘭克僅介紹比較入門的設定，當然還有一些更細部的設定，像是 Marker 可換成自己的圖、地圖的手勢和觸發事件、地圖上 POI 景點搜尋等等，這些都在文章最後所附上的連結裡，大家若是有興趣，不妨試著參考官方的說明文件自己試試看。跟 Google Map 相關的還有一個服務是法蘭克所沒有提到的，那就是 Google Places，那是什麼呢？Google Places SDK 就是我們在 Google Map App 內所看到的景點搜尋功能，這容許法蘭克有時間再來跟大家說明囉！最後還有一點很重要，那就是 Google 也不是讓開發者無限制的使用 API，意思就是說在流量方面也是有所控管的，所以當要使用 Google 相關服務時，也務必將收費標準一併考慮進去。意猶未盡的可以繼續看 Google Map Marker Clustering，是一個蠻有趣的特效。
如果您喜歡我的文章，請多按幾下「拍手」給我鼓勵，或是按「follow」讓我持續提供好文章給您。
