SwiftUIでGoogleMapを表示する
SwiftUIでやったことなかったのですがやってみたら割とすぐできました。
プロジェクトの設定など忘れがちなので備忘録も兼ねて初投稿します💁🏻
事前準備
- Google cloud platform(GCP)
- GoogleMapを利用するためのAPIキー
このあたりはViewControllerで実装するときと変わらないので説明は割愛します。
以降、APIキーなど諸々の準備が済んでいる前提で進めます。
Projectの用意
新規Projectを作成後、以下を参考にMaps SDK for iOSを追加します
APIキーをProjectに追加する
SwiftUIで新規Projectを作成すると AppDelegateがないので追加して以下のように記載します
import Foundation
import GoogleMaps
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
GMSServices.provideAPIKey("YOUR_API_KEY")
return true
}
}
Places APIなど他のAPIを使う場合、
GMSPlacesClient.provideAPIKey("YOUR_API_KEY")
などを同様に追加してあげればOKです
この追加したAppDelegate.swiftを適用させるためにプロジェクト名App.swiftを編集します
import SwiftUI
@main
struct GoogleMapDemoApp: App {
@UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
...
}
Mapを表示する
Step4: Add a map にあるコードはViewControllerのため、このまま追加しても動きません
SwiftUIではUIViewRepresentableを使ってMapを表示します
GoogleMapを表示するための適当なViewを用意して以下のようにします
import SwiftUI
import GoogleMaps
struct MapView: UIViewRepresentable {
let mapView = GMSMapView(frame: .zero)
func makeUIView(context: Context) -> GMSMapView {
return mapView
}
func updateUIView(_ mapView: GMSMapView, context: Context) {
}
}
ContentView.swiftにこれを追加してあげれば...
struct ContentView: View {
var body: some View {
MapView()
}
}
表示されました！
struct ContentView: View {
var body: some View {
MapView().ignoresSafeArea()
}
}
MapViewに対して .ignoreSafeArea()を加えると地図が全画面表示になります
終わりに
次
参考
https://developers.google.com/maps/documentation/ios-sdk/overview
https://developers.google.com/maps/documentation/ios-sdk/config
https://developers.google.com/maps/documentation/ios-sdk/config#add-map
https://kumano-te.com/activities/google-maps-sdk-swiftui
Discussion