🗺️

iOSアプリでGoogleマップを表示する方法（Maps SDK for iOS利用）

2024/12/09に公開

iOS

 はじめにiOSアプリでGoogleマップを表示するためには、「Google Maps Platform」の登録が必要です。
「Google Maps Platform」が提供している「Maps SDK for iOS」を利用してGoogleマップの表示を行います。
本記事を作成した時点では「Maps SDK for iOS」を利用してGoogleマップを表示するだけであれば、無料で行うことができましたが、今後も無料で使用できるとは限りませんので、必ず公式ドキュメントや利用規約をご確認いただき、ご自身の責任で適切に設定・管理を行ってください。
本記事内で紹介するサービスや機能の利用に伴う料金の発生や、その他の損害については一切の責任を負いかねます。

 事前準備Google Maps Platformの登録に以下二つが必要です。
Googleアカウント
クレジットカード（無料のサービスしか使わない場合でも必要）

 筆者の利用・実行環境macOS Sonoma 14.6
Xcode 16.1
Maps SDK 9.2.0
Swift 5
UIKit

※StoryboardとSwiftUIは使用しません。

 Google Maps PlatformiOSアプリでGoogleマップを表示するためには、「Google Maps Platform」に登録する必要があります。

今回は「Maps SDK for iOS」を使用します。

マップIDを使わない一般的なマップ表示だけであれば、2024年12月8日時点では利用料は無料となっております。（ストリートビューなど他の機能については費用がかかりますので、使用する際にはご注意ください。）



情報源

 Google Maps Platformに登録
 登録用ページを表示公式サイトにアクセスし、右上にある「使ってみる」ボタンを選択します。


 使用するGoogleアカウントを指定Google Maps Platformを利用するGoogleアカウントでログインし、「同意して続行」ボタンを選択します。


 支払い方法を登録無料の範囲内で利用する場合でもクレジットカードの登録が必要です。

カード情報入力後に「送信」ボタンを選択します。


 APIキーを取得支払い方法の登録が完了するとすぐにAPIキーが表示されます。後ほど使用するので、コピーしておいてください。※チェックボックスは任意のものを選択してくだい。


 APIキーの保護APIキーの保護設定画面が表示されます。無制限にAPIを利用できるようにしてしまうと、セキュリティ的にも良くないですし、APIキーが漏洩して不正利用されてしまった場合に、予想外の費用がかかってしまう可能性がありますので、ここで必要最低限の設定にしておくことをおすすめします。

私の場合は、マップ表示だけですので、「APIの制限」→「Maps SDK for iOS」のみチェックして「OK」を選択しました。※あらかじめ「AppID（BundleID）」が決まっている場合は、「iOSアプリ」を選択することで、特定のAppIDだけ利用可能にするといった制限をかけることも可能です。



以上で、Google Maps Platformへの登録は完了です。

 Xcodeでプロジェクトを作成マップ表示のためのAPIキーの取得が完了したため、Xcodeプロジェクトの作成をしていきます。
Xcodeを起動します。
「Create New Project...」を選択します。
「App」を選択します。
「Interface：Storyboard」「Language：Swift」として、他は任意の内容を入力し、「Next」を選択します。

※参考までに私は以下のように入力しました。


プロジェクト作成するディレクトリを指定してください。

 Maps SDK for iOSの追加CocoaPodsも対応していますが、今回はSwift Package Managerを使用してSDKの追加を行います。
プロジェクトを選択して、「Package Dependencies」を開き「+」を選択します。

右上の検索欄に「https://github.com/googlemaps/ios-maps-sdk 」を入力し、「Add Package」を選択します。

パッケージのダウンロードが終わるとプロジェクトの選択画面が表示されるので、そのまま「Add Package」を選択します。

GoogleMapsというパッケージが追加されていることが確認できるようになります。


 UIKitで画面表示するための準備1.「LaunchScreen.storyboard」と「Main.storyboard」 を削除します。

2.「Info.plist」の「Storyboard Name」を削除します。

Xcode上では以下のようになります。



3. TARGETSのInfoタブ内の「Main storyboard file base name」を削除します。


 コーディング
 AppDelegate.swiftimport UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        //Google Maps Platformから払い出されたAPIキーを指定
        GMSServices.provideAPIKey("YOUR_API_KEY")
        return true
    }
}

 SceneDelegate.swiftimport UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let windowScene = (scene as? UIWindowScene) else { return }
        let window = UIWindow(windowScene: windowScene)
        self.window = window
        let viewController = ViewController()
        window.rootViewController = viewController
        window.makeKeyAndVisible()
    }
}

 ViewController.swiftimport UIKit
import GoogleMaps

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let options = GMSMapViewOptions()
        options.frame = self.view.bounds
        let mapView = GMSMapView(options: options) //GoogleMapViewのインスタンスを生成
        view.addSubview(mapView) // マップビューを画面に追加
    }
}

 シミュレータでGoogleマップ表示
 任意のSimulatorデバイスを指定Xcode上部で、Simulatorで起動する任意のデバイスを指定して（私の場合はiPhone16を指定）、実行（▶️）を選択する。


 Googleマップが表示されたことを確認

 まとめ以上が、Maps SDK for iOSを利用して、iOSアプリでGoogleマップを表示する方法でした。

AppleMapを表示する場合はMapKitを使用することで、より簡単にマップ表示することができますが、Googleマップについても、APIキーの取得以外については、簡単に実装することができました。

今回は初級編だったのですが、次回は基本編ということで、マップ上にピンを立てたり、線を引いたりする方法を記事にしていきたいと思います。

更新楽しみにしていてください！