マルティスープ
Staff Blog

2021.12.27

SwiftUIでGoogleMapsを表示する

今回は、SwiftUIを使ってGoogleMapsを表示します。この記事での使用環境は以下のとおりです。

• Xcode13.1
• Swift5.1
• iOS15.2

前準備

iOSアプリでGoogleMapsを表示させるには、Goocle Cloud PlatformでMaps SDK for iOSを使えるようにする設定が必要です。また、iOSアプリでGoogleMapsを表示させるには、 cocoapods を使用します。

• プロジェクト作成・Maps SDKの有効
• APIキーの作成
• Cocoapodsのインストール

SwiftUIでGooleMapsを表示する

SwiftUIでGoogleMapsを表示していきます。今回は、4つのSwiftファイルを作成しています。今回は、Xcodeのプロジェクト名は「GoogleMapSampleApp」で実装していきます。

最初に、SwiftUIでGoogleMapsを表示するために、AppDelegateにAPIキーを宣言する必要があります。

SwiftUIでのプロジェクト作成時にAppDelegateに相当するファイルは作成されないため、プロジェクト内に新たに AppDelegate.swift を作成して、GoogleMapsSDKに関する設定を記載します。また、プロジェクト作成時に初期生成されるエントリポイントを記載するファイルに、AppDelegateと接続するアダプタを記載します。

GoogleMapSampleApp.swift : 初期で作成されるエントリポイントを記載するファイル

import SwiftUI

// APIキーをここに宣言
let API_KEY = "YOUR_API_KEY"
@main
struct GoogleMapsSampleApp: App {
    
    // AppDelegateと接続するアダプタを宣言
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

AppDelegate.swift : 新たに追加するデリゲートファイル

import Foundation
import UIKit
import GoogleMaps

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        // APIをここで宣言
        GMSServices.provideAPIKey(API_KEY)
        return true
    }
}

次にGoogleMapsを表示するビューを記載していきます。

SwiftUIはコードベースでViewが記載できる画期的な手法ですが、残念ながら初期状態ではGoogleMapsのView(GMSMapView)は対応していません。そこで、GMSMapViewを返すViewを自作して、 ContentView に対応させる必要があります。

ここで、新たに GoogleMapsView.swift を作成してGMSMapViewを返すViewを作ります。このファイルには、UIViewRepresentable を継承した構造体を宣言します。これにより、SwiftUIにおいて従来のUIKitのViewの宣言ができるようになります。

構造体の中には makeUIView 関数と updateUIView 関数の宣言が必要です。 makeUIView 関数はViewが作成されたときに呼ばれる関数ですが、この中にGMSMapViewの設定を記載します。関数内のGMSMapView宣言の書き方は、従来のUIKitの書き方です。

その後、作成した GoogleMapsView.swift を ContentView.swift で呼び出し、SwiftUI形式でGoogleMapsを表示させます。

GoogleMapsView.swift :  GMSMapViewを返すファイル

import SwiftUI
import GoogleMaps

struct GoogleMapsView: UIViewRepresentable {
    func makeUIView(context: Context) -> GMSMapView {
        
        // 一番最初に表示する座標とズームレベルを設定します
        // 緯度経度は東京駅を設定しています
        let camera = GMSCameraPosition.camera(withLatitude: 35.681111, longitude: 139.766667, zoom: 15.0)
        
        // マップを表示するViewを提示して返します
        let mapView = GMSMapView(frame: CGRect.zero, camera: camera)
        return mapView
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
        // 今回は何も記入しません。
        // 関数は宣言する必要があるので、空の状態で関数を宣言します。
    }
}

struct GoogleMapsView_Previews: PreviewProvider {
    static var previews: some View {
        GoogleMapsView()
    }
}

import SwiftUI
import CoreData

struct ContentView: View {

    var body: some View {
        //作成したGoogleMapsViewを全画面で表示する
        GoogleMapsView().edgesIgnoringSafeArea(.all)
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ここまでの状態でXcode上でアプリを実行すると、iOSアプリ上でGoogleMapsが表示されます。

GoogleMapsのスタイルを変更する際には、MapIDを作成して GoogleMapsView.swift 内で紐付ける必要があります。

// マップを表示するViewを提示して返します 
let mapID = GMSMapID(identifier: "YOUR_MAP_ID") 
let mapView = GMSMapView(frame: CGRect.zero, mapID: mapID, camera: camera) 
return mapView

MapIDは、Google Cloud Platformで生成 します。なお、MapIDを紐付けせずに使用する場合と、MapIDを紐付けして使用する場合では、発生する料金が異なりますので、十分ご注意下さい。

また、MapIDを紐付ける場合には基本的に料金が発生するため、Google Cloud Platformで作成したプロジェクトに対して課金設定が必要です。

• MapIDを紐付けしない場合の料金
• MapIDを紐付けした場合の料金