MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2021.12.27

SwiftUIでGoogleMapsを表示する

ブログアイキャッチSwiftUI

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

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

前準備

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

SwiftUIでGooleMapsを表示する

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

SwiftUI-ファイル構成


 

最初に、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()
    }
}
makeUIView で返す値は、 some GMSMapView ではなく、 GMSMapView を返します。

ContentView.swift : 初期で生成されるViewファイル
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が表示されます。

SwiftUIのアプリケーションでの実行結果


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で作成したプロジェクトに対して課金設定が必要です。

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2017.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2016.07.24

スタイルマップを使用して地図の雰囲気を変えてみる

みんさん、こんにちは!

いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね? 実はグーグルマップ・・・

続きを読む

2018.01.14

Googleマップに表示されるお店のアイコンを消したい

みなさん、こんにちは。

Googleマップ上には色々なお店のアイコンがありますが、用途によってはいらないな~と思うことはありませんか?

続きを読む

 - Google Maps SDK for iOS