🗺️

SwiftUIでGoogleMapを表示する

2022/05/03に公開約2,700字

SwiftUIでやったことなかったのですがやってみたら割とすぐできました。
プロジェクトの設定など忘れがちなので備忘録も兼ねて初投稿します💁🏻


事前準備

  • Google cloud platform(GCP)
  • GoogleMapを利用するためのAPIキー

このあたりはViewControllerで実装するときと変わらないので説明は割愛します。

https://developers.google.com/maps/documentation/ios-sdk/overview

以降、APIキーなど諸々の準備が済んでいる前提で進めます。

Projectの用意

新規Projectを作成後、以下を参考にMaps SDK for iOSを追加します

https://developers.google.com/maps/documentation/ios-sdk/config

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://zenn.dev/mimimimi/articles/0a4744a14dc3bc

参考

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

https://github.com/mimimi-miOmi-mimi/ios_google_map_demo

Discussion

ログインするとコメントできます