ドキュメント / セットアップ / iOS / Google Maps

Google Maps セットアップ

Google Maps SDK for iOS を MapConductor から使う手順です。すでに Google Maps に依存しているアプリや、GoogleMapDesign のマップタイプが必要な場合に選びます。

PACKAGE

ios-for-googlemaps

API KEY

必要

MIN iOS

16.0

VIEW

GoogleMapView

ほかのプラットフォームAndroid React

デモを見る店舗マップ · React ↗

前提

Xcode 15 以上

Google Cloud Console のアカウント

Maps SDK for iOS が有効な Google Cloud プロジェクト

デプロイターゲット iOS 16.0 以上

STEP 01

API キーを取得する

Google Cloud Console にアクセスします。
プロジェクトを作成するか、既存のものを選びます。
Maps SDK for iOS を有効にします。
「認証情報」から API キーを作成します。
キーをアプリのバンドル ID に制限します。

STEP 02

Swift Package Manager で追加する

Xcode の File > Add Package Dependencies からパッケージ URL を入力します。ネイティブ SDK は依存関係として自動的に入るので、別途追加する必要はありません。

Package URLSwift Package Manager

https://github.com/MapConductor/ios-for-googlemaps

Package.swiftSwift

dependencies: [
    .package(url: "https://github.com/MapConductor/ios-sdk-core", from: "1.1.4"),
    .package(url: "https://github.com/MapConductor/ios-for-googlemaps", from: "1.0.0"),
],
targets: [
    .target(
        name: "YourApp",
        dependencies: [
            .product(name: "MapConductorCore", package: "ios-sdk-core"),
            .product(name: "MapConductorForGoogleMaps", package: "ios-for-googlemaps"),
        ]
    ),
]

STEP 03

SDK を初期化する

地図ビューが作られる前に GMSServices.provideAPIKey(_:) を一度だけ呼びます。@main の App 構造体が推奨の場所です。

MyApp.swiftSwift

import SwiftUI
import GoogleMaps
import MapConductorForGoogleMaps

@main
struct MyApp: App {
    init() {
        GMSServices.provideAPIKey("YOUR_GOOGLE_MAPS_API_KEY")
    }

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

ContentView.swiftSwift

// Alternative: call it from the view's sdkInitialize closure
GoogleMapView(state: mapState, sdkInitialize: {
    GMSServices.provideAPIKey("YOUR_GOOGLE_MAPS_API_KEY")
})

注意

API キーをソースにベタ書きしないでください。xcconfig や環境変数からビルド時に注入し、リポジトリには入れないようにします。

STEP 04

位置情報の権限を足す（必要な場合）

Google Maps で位置情報サービスを使う場合は Info.plist に用途を書き、アプリ側で許可を求めます。

Info.plistXML

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to display on the map</string>

LocationManager.swiftSwift

import CoreLocation

final class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private let manager = CLLocationManager()

    override init() {
        super.init()
        manager.delegate = self
    }

    func requestPermission() {
        manager.requestWhenInUseAuthorization()
    }
}

動作確認

ここまで動けば完了

この ContentView でビルドして実行し、地図が出てズームとパンが効けば完了です。

ContentView.swiftSwiftUI

import SwiftUI
import MapConductorCore
import MapConductorForGoogleMaps

struct ContentView: View {
    @StateObject var mapState = GoogleMapViewState(
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
            zoom: 12.0
        )
    )

    var body: some View {
        GoogleMapView(state: mapState)
            .ignoresSafeArea()
    }
}

地図デザイン

GoogleMapDesign は Google のマップタイプに対応します。

GoogleMapDesign

Notes

Normal

通常の道路地図

Satellite

衛星画像

Hybrid

衛星画像＋道路とラベル

Terrain

地形図

うまくいかないとき

地図が出ない（グレーの画面）

地図ビューが作られる前に GMSServices.provideAPIKey(_:) が呼ばれているか確認します。
Console で Maps SDK for iOS が有効か確認します。
キーのバンドル ID 制限が実際のバンドル ID と一致しているか確認します。
デプロイターゲットが iOS 16.0 以上か確認します。

ビルドが通らない

ビルドフォルダーをクリアします（Cmd+Shift+K）。
~/Library/Developer/Xcode/DerivedData を削除して再ビルドします。
Swift Package Manager の依存を更新します。CocoaPods との併用は避けてください。

次に

GoogleMapView が出たら、Marker・Polyline・Circle は共通 API で書けます。プロバイダを変えてもそこは書き直しになりません。