# 如何在 iOS APP 加入 Google map？｜Google Maps for iOS 串接練習

Source: https://kylelu.com/articles/2023-08-21-googlemaps-for-ios
Markdown alternate: https://kylelu.com/articles/2023-08-21-googlemaps-for-ios.md
Author: Kyle Lu
Published: 2025-03-22
Tags: Swift 學習筆記

練習在 iOS APP 串接 Google maps，學習安裝 Google Maps for iOS SDK

## 作品目的

練習在 iOS APP 串接 Google maps。

## 學習目標

- 因應 M1 環境更新 Ruby 版本
- 安裝 cocoapods
- 設定 Google Maps for iOS

## 設定流程

- **安裝 CocoaPods 於 M1 MacBook**安裝Homebrew
- 使用Homebrew安裝CocoaPods
- 安裝全新的 Ruby 版本
- 設置 CocoaPods
- 驗證安裝
- **安裝 Google Maps SDK**在應用程式中使用 Google Maps
- 設定地圖：加入 View、連結 code、初始化

## Tips

- 確認開發環境是否為 M1，要注意 Ruby 版本
- 要下載 Google Maps for iOS 而不只是 Google Maps
- 確認有更新 pod file

關於 1. 安裝CocoaPods 於 M1 MacBook

原本我在 Mac mini M1 怎麼裝 cocoapods 都失敗

抽絲剝繭到最後才發現是 Ruby 版本的問題

因為 M1 系統自帶的版本太舊，需要先更新才能安裝 cocoapods

可以參考下面這篇文章，寫得很詳細

[m1 silicon macos 安装 cocoapods](http://wiki.ducafecat.tech/blog/flutter-tips/3-m1-macos-install-cocoapods.html(%E5%9C%A8%E6%96%B0%E5%88%86%E9%A0%81%E4%B8%AD%E9%96%8B%E5%95%9F)?ref=ghost.kylelu.com)

這裡我會著重分享後面安裝 Google Maps SDK 的步驟。

### **1. 安裝 Google Maps SDK**

首先，在專案目錄中建立一個 **Podfile**。在終端機中切換到專案目錄，然後執行：

用 cd 加拖曳資料夾的方式產生路徑，按下 Enter 就可以進入路徑

執行

```
pod init
```

產生一個 pod file。

接著，你需要編輯這個文件來加入 Google Maps SDK。

使用文本編輯器打開 **Podfile**，然後加入以下行：

```
pod 'GoogleMaps'
pod 'GooglePlaces'
```

儲存並關閉文件。然後，在終端機中執行以下指令來安裝 Google Maps SDK：

```
pod install
```

安裝 Google Maps SDK，並創建一個 **.xcworkspace** 文件。改用 **.xcworkspace** 文件來開啟專案，而不是 **.xcodeproj** 文件。

### **2. 在應用程式中使用 Google Maps**

設定好了 SDK，現在就可以來用 Google 地圖了，請選 `AppDelegate.swift` ，匯入 Google Maps 函式庫。

```
import GoogleMaps
```

在 func `application(_:didFinishLaunchingWithOptions:)` 方法中編輯下列程式碼，將”輸入 APIKEY ”替換成自己的 API 金鑰：

```
GMSServices.provideAPIKey("輸入 APIKEY")
```

再到 `Main.storyboard`，開啟 Assistant，會開啟 `ViewController.swift`，開始準備設定地圖。

### **3. 設定地圖**

- **加入 Google Maps View**在 **main.storyboard** 頁面
- 在右上角的 Object Library（物件庫）中，尋找 **UIView** 並將它拖曳到 ViewController 上。
- 接著，選擇這個 **UIView**，然後在右邊的 Identity Inspector 中，將 Class 改成 **GMSMapView**。
- **連結 GMSMapView 到 code** 按住 Control 鍵，從 **main.storyboard** 中的 **GMSMapView** 拖曳到 **ViewController.swift**，創建一個 IBOutlet。可以將它命名為 **mapView** 或其他你喜歡的名稱。 在 **ViewController.swift** 中，應該會看到以下的 code：

```
@IBOutlet weak var mapView: GMSMapView!
```

- **初始化地圖**現在可以加入一些初始化地圖的 code 了，例如把「台北」設為預設值，一打開 APP 就是台北。zoom 代表鏡頭遠近，數字越大越近：

```
let camera = GMSCameraPosition.camera(withLatitude: 25.0330, longitude: 121.5654, zoom: 12.0) // 台北的經緯度
mapView.camera = camera
mapView.isMyLocationEnabled = true
```

嘗試執行模擬器，成功召喚出 Google map 啦！

## 參考資料