這篇文章要分享怎麼使用 Google Map。如果您也想在您的 iPhone 程式中使用 Google 地圖的話，請搜尋 Google Map API。
到了 Google Map 的網站以後，請選 iOS，
這邊有兩個選項，請選 Google Map for iOS，
下面只有兩個步驟，[取得金鑰]，然後 [開始開發]。請先點擊 [取得金鑰]，
跳出的對話框，建立一個新的專案，請填您的專案名稱，在這個範例裡面，我就取名叫 MapDemo
(第一次到這個畫面的話，會問您是否同意使用條款。請選同意。[不同意就沒辦法用了，所以選同意])
然後按 Next，這邊要等一下，約 20 秒鐘，就會跳出 API KEY。請拷貝一下這個金鑰，然後按 Done，
接下來請按 [開始開發]。您會看到其實文件都是中文，就照著做就好了。首先就是使用 CocoaPods 來安裝。如果大家沒有用過 CocoaPods 來安裝第三方函式庫的話，可以參考我有[錄過一個 Youtube 的短片]。
請先開一個新的專案，選 Single View App，專案的名稱也叫 MapDemo。開好新的專案之後，請先選 AppDelegate.swift，先把剛剛的金鑰，存進常數 apiKey裡面。
好了的話，請打開電腦的終端機，進入到專案資料夾之後，輸入 pod init，產生一個 pod file。
接著用您的文字編輯器編輯這個檔案，加入這兩行。
然後回到終端機，輸入 pod install，就開始安裝 Google Map 的 函式庫。安裝好了之後，請關掉終端機，也關掉目前的專案，打開 Workspace。
設定好了 SDK，現在就可以來用 Google 地圖了，請選 ViewController.swift，先在這個檔案匯入 Google Maps 函式庫。
如果點進 Google Maps 的函式庫的話，您會發現我們要用來顯示地圖的 GMSMapView 與要用來顯示街景服務的 GMSPanoramaView 類別，都是 UIView 的子類別。
知道了用來顯示地圖的 GMSMapView 是UIView 的子類別之後，就到 Main.storyboard，在右下方搜尋 UIView，把一個 UIView 拉到畫面上。然後改動這個 UIView 的類別，改成 GMSMapView。這就是要顯示地圖的元件。
設定地圖的 Autolayout，讓這個地圖填滿整個畫面。
把這個地圖連結到程式碼中。命名成 map view。
連結好了的話，在真的使用 Map view 之前，先選 AppDelegate.swift。到這個檔案來設定金鑰。請在這個檔案的上方先匯入 Google Maps 函式庫。
在 Application did finish launching 這個方法裡面，如下設定 APIKey，參數就拷貝之前的 apiKey 字串。設定好了之後，請把原來的 apiKey 屬性刪除。
設定好了 API Key 以後，請選 ViewController.swift，開始準備設定地圖。要設定地圖，先要決定顯示位置的座標，比方到瀏覽器搜尋 Google 地圖，然後在左上方搜尋心齋橋，(您可以搜您要顯示的地方，)選到大頭針之後。按右鍵，跳出來的對話框選 [這是哪裡]，就可以知道緯度跟徑度，把這個數值拷貝下來。先暫時以註釋的方式貼到程式碼裡面。
要決定地圖顯示的位置，要用 GMSCameraPosition 類別，設定要顯示的位置。請在 viewDidLoad 方法中寫下下面的程式碼。意思是用 GMSCameraPosition 類別的 camera 方法決定地圖要顯示的位置。把 latitude 填入緯度；longitude 填入徑度；最後 zoom 是放大縮小的比例，數值越大，拉的越近。而這個方法會回傳一個 GMSCameraPosition的實體，把這個要顯示的位置存進常數 camera。這個 camera 就是地圖要顯示的位置。
然後設定 mapView 的 camera 屬性，地圖要顯示的位置，就是上面常數 camera。這樣就好了，這時如果按下編譯跟執行的按鈕，就可以看到畫面上有地圖了。
Google 地圖跟 apple 原生的地圖一樣，也有不同的顯示模式，如果設定 mapView 的 mapType 屬性，可以改變地圖的顯示模式，請試試看。範例中選的是衛星模式。
Google地圖的大頭針叫做 Marker。如果要在地圖上加上大頭針的話，請加上下面的程式碼。意思是先產生一個 GMSMarker，存進常數 marker 裡面。設定這個大頭針的位置(marker 的 position 屬性)。然後設定這個大頭針的marker的 map 屬性，這個 map 屬性一開始是沒有值。如果是沒有值的話，大頭針不會秀出來，不過如果把 mapView 設定成大頭針的 map 屬性的話，就會在 mapView 放上大頭針。這時編譯跟執行這個程式，就會看到大頭針放到地圖上了。
想要做出點擊大頭針會出現小對話框的功能也很簡單，請設定 marker 的 title 與 snippet 屬性。如下，title 是大標題；snippet 是小標題，請再次按下編譯跟執行的按鈕。點擊這個大頭針，就出現設定的資訊。
目前大頭針的顏色是紅色的，如果想要設定成其他顏色也很簡單，如下，設定 marker的 icon，大頭針就變成您想要顯示的顏色了。
在這篇文章結束之前，我想要做出點擊跳出來的資訊框，就會秀出街景的功能，這個是 Google 地圖的強項，所以我也順便介紹一下。要做到這樣的功能，首先要做到的，就是先做出點擊資訊框會有反應，第二步再做出，點擊之後，會跳出街景服務。要做出點擊資訊框有反應的話，要讓我們的 ViewController 類別實體，去做 Google 地圖的 delegate 屬性。設定的話，第一個要讓 ViewController 類別去服從 GMSMapViewDelegate 協定，然後在 view did load 設定 ViewController 類別實體是 map view 的 delegate 屬性，這樣設定之後，就可以實作協定的一個方法，did tap info window 這個方法。在這個方法裡面請先印出(print)，「show new view」。做到這邊，請再按下編譯跟執行的按鈕。現在按到資訊框，就會印出 show new view。這樣就做到了第一步，點擊資訊框會有反應。
第二步要做出，點擊地圖大頭針的資訊框之後，會跳出街景服務。那前面提到 Google 地圖的街景服務，是一個叫做 GMSPanoramaView 的類別。而這個類別是 UIView 的子類別。所以這個範例打算在 Main.storyboard 上加入一個新的 UIViewController，在新加入的這個 UIViewController 上加上一個 UIView，把這個 UIView 的類別設定成可以秀出街景服務的 GMSPanoramaView。如此，點擊第一個畫面地圖上大頭針的資訊框，就會轉換畫面到這個UIViewController，看到上面 GMSPanoramaView 秀出的街景服務。所以這一步請 a)先加入一個新的 UIViewController。b)在上面加上一個 UIView，c)把 UIView 的類別改成 GMSPanoramaView，最後 d)設定這個 GMSPanoramaView 的 Autolayout，設定要填滿整個畫面。
加一個新的類別，來跟新加入的 UIViewController 做連結。請選 Xcode > [File] > [New File]。
加入 Cocoa Touch Class 檔案，把這個新加入的檔案命名成 PanoViewController，設定其為 UIViewController 的子類別。
新增好了檔案之後，先在 PanoViewController.swift 檔案匯入 Google Maps 函式庫。
有了這個類別，請回到 Main.storyboard 跟稍早新加入的 UIViewController 來做一個連結。
把 GMSPanoramaView 連結到 PanoViewController 類別程式碼中，命名叫 panoView。
接下來選到 ViewController，一面按著鍵盤的 control，一面連結到 PanoViewController。跳出來的對話框選 [show]，並且幫新產生的segue 命名成 [showPano]，
為了導覽的便利，把 ViewController 嵌入在 Navigation Controller 裡面。
回到程式碼，按到大頭針的資訊欄，就執行這個名叫 [showPano] 的 segue，就可以到街景服務的畫面了。
我們可以把街景服務的座標在 ViewController 類別裡，透過 prepare for segue 傳到 PanoViewController 類別中。不過在這個範例，就簡化這個流程，就把座標拷貝起來，直接貼到 PanoViewController 類別，假裝這就是傳過來的座標。
重點是要告訴大家，有了a)座標 跟 b)準備顯示街景的 GMSPanoramaView 之後，要怎麼秀出街景。方法就是在 PanoViewController 的 viewDidLoad 方法裡面，寫下下面的程式碼。
意思是，產生出 GMSPanoramaServices 服務的實體，使用這個服務的r equest panorama near coordinate 方法，第一個參數帶入座標，第二個參數是一個closure。在 closure 裡面，closure 的第一個參數是環景的影像，第二個參數就是錯誤。在 closure 裡面的程式碼就先判斷是否有錯誤，如果有的話，就印出錯誤，並且跳出不再執行下去。
如果沒有錯誤，就設定 panoView 的 panorama (環景影像)，是 closure 裡面 request 得到的街景服務，也就是 pano。
請按編譯跟執行的按鈕，這時如果點開大頭針的資訊，就會執行 [showPano] 的 segue，到新的畫面顯示街景服務。
很酷吧？還有很多很酷的功能，很簡單就可以做出來了。當然您還可以繼續做下去，比方說把Navigation Bar 上面加上文字，或是在地圖上長按就會加上大頭針的功能。Google Map 實在是很強，請大家去看 Google Map API 的文件，都是中文的，請大家看文件繼續研究一下吧！
希望大家喜歡今天的教學，也歡迎訂閱我的 Medium。我在 facebook 有一個 [粉絲團]，也歡迎大家來按讚。每天我都會在那邊分享我學到的最新的事物。希望提供大家有價值的資訊，歡迎分享。我們下次見。
下面是這篇文章內容的短片，也歡迎參考與分享歐~
