使用 Flutter 在 iOS 和 Android 上設定 GoogleMap

前言

如果要在 iOS 或是 Android 中使用 Google 所提供的地圖或道路資訊等等，就必須要取得 Google 配給你的 API key ，而它是用來在每次請求 Google 地圖時讓 Google 可以辨認帳戶的金鑰。所以請妥善保管你的金鑰並且由於安全的緣故不要在同一個金鑰上面開起太多功能！

事前準備

所有 Google 的服務都會經過手機內的 Google Play Services 來傳輸資料。我們可以從下圖得知應用程式是只要使用到 Google 的服務都會透過 IPC 與 Google Play Services 做溝通的（認證、取得資訊…）

因此記得在 Android studio 中安裝 Google Play services 不然是無法取得地圖的任何資訊喔！！！

Android 環境設置

設定 google map 的 API key 在 AndroidManifest.xml 檔案中

在該路徑底下 android/app/src/main/AndroidManifest.xml

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

iOS 環境設置

Step 1

在 cmd 建立 Flutter 專案時把預設 iOS 開發語言設定成 swift

flutter create -i swift <專案名字>

Step 2

設定 google map 的 API key 在 Appdelegate.swift 檔案中

在該路徑底下 ios/Runner/AppDelegate.swift

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Step 3

確保 iOS 裝置可以支援地圖渲染還需要加入以下設定在該檔案中

在該路徑底下ios/Runner/Info.plist

1 2	<key>io.flutter.embedded_views_preview</key> <true/>

Learn by sharing