SwiftUIのStepperでGoogle Mapsのズームレベルを自在に操る

markdown

はじめに (対象読者・この記事でわかること)

この記事は、SwiftUIでアプリ開発を始めたばかりの方や、Google Mapsをアプリに組み込みたいと考えているiOS開発者を対象にしています。
SwiftUIのStepperを使ってGoogle Mapsのズームレベルを直感的に操作する方法を、実装コード付きで解説します。記事を読み終えると、UI部品と地図連携の基礎が身につき、独自の地図アプリを作る第一歩を踏み出せます。

前提知識

Swiftの基本文法
SwiftUIのViewと@Stateの使い方
XcodeでiOSプロジェクトを作成できること
CocoaPodsまたはSwift Package ManagerでSDKを追加できること

Stepperと地図連携の魅力

地図アプリでよくある「＋」「－」ボタンによるズーム操作を、SwiftUIのStepperで置き換えると、コードがシンプルになり、アクセシビリティやハプティクスまで標準でサポートされます。
また、Stepperの値をGoogle Mapsのズームレベルにバインディングすることで、地図の状態とUIが常に同期された、直感的な操作性を実現できます。

実装してみよう：Stepperでズームレベルを変更する

Step 1：Google Maps SDKをプロジェクトに追加

Google Cloud ConsoleでMaps SDK for iOSを有効化し、APIキーを生成
XcodeプロジェクトのInfo.plistに以下を追加

Xml

<key>GMSApiKey</key>
<string>YOUR_API_KEY</string>

Swift Package ManagerでGoogleMapsパッケージを追加（URL: https://github.com/googlemaps/ios-maps-sdk）

Step 2：Stepper連動のMapViewを作成

UIViewRepresentableを使ってSwiftUIからGoogle Mapsを操作するカスタムビューを作ります。

Swift

import SwiftUI
import GoogleMaps

struct MapView: UIViewRepresentable {
    @Binding var zoom: Float  // Stepper値と同期

    func makeUIView(context: Context) -> GMSMapView {
        let camera = GMSCameraPosition.camera(
            withLatitude: 35.6812,
            longitude: 139.7671,
            zoom: zoom
        )
        let mapView = GMSMapView(frame: .zero, camera: camera)
        mapView.isMyLocationEnabled = true
        return mapView
    }

    func updateUIView(_ uiView: GMSMapView, context: Context) {
        // Stepper値が変わったらカメラをアニメーション付きで移動
        UIView.animate(withDuration: 0.3) {
            uiView.animate(toZoom: zoom)
        }
    }
}

Step 3：Stepperと連動するContentView

Swift

struct ContentView: View {
    // ズームレベル 3〜20（Google Mapsの許容範囲）
    @State private var zoom: Float = 15

    var body: some View {
        VStack(spacing: 0) {
            // 地図エリア
            MapView(zoom: $zoom)
                .edgesIgnoringSafeArea(.top)

            // コントロールエリア
            VStack {
                Text("ズームレベル")
                    .font(.headline)
                Stepper(value: $zoom, in: 3...20, step: 1) {
                    Text("\(Int(zoom))")
                }
                .padding()
                .background(Color(.systemBackground))
                .cornerRadius(12)
                .shadow(radius: 4)
            }
            .padding()
            .background(Color(.systemGroupedBackground))
        }
    }
}

Step 4：プレビュー用のProvider（オプション）

Swift

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ハマりどころと対策

現象	原因	解決策
ビルドエラー「No such module 'GoogleMaps'」	SDKがリンクされていない	Package Dependenciesで`GoogleMaps`を正しく追加
地図が表示されない	APIキーが無効 or 制限	Cloud Consoleで「iOSアプリ」制限を外してテスト
Stepperが重い	毎フレーム描画	`updateUIView`でanimateブロックを使い30 msごとに更新
ズーム範囲外でクラッシュ	3未満/20超え	Stepperの`in: 3...20`を必ず指定

まとめ

本記事では、SwiftUIのStepperとGoogle Mapsのズームレベルをバインディングして、シンプルながらも使いやすい地図インターフェースを作りました。

Stepperの値を@Bindingで地図ビューに渡す
UIViewRepresentableでUIKitのGMSMapViewをSwiftUIに橋渡し
animate(toZoom:)で滑らかにズーム変更

この記事を通して、SwiftUIと既存のUIKit SDKを連携する基本パターンが身につきました。
次回は、Stepperの代わりにスライダーを使い、マップスタイルを切り替える方法を紹介します。

SwiftUIのStepperでGoogle Mapsのズームレベルを自在に操る🗺️