12 月にサンフランシスコで開催される次回の Google Maps Platform Developer Community Day にぜひご参加ください。参加をご希望の場合は、今すぐお申し込みください。

Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

アプリに 3D 地図を追加する

プラットフォームを選択: Android iOS JavaScript

シアトル、サンフランシスコ、パリの基本地図

このページでは、Maps 3D SDK for iOS を使用して iOS アプリに基本的な 3D 地図を追加する方法の例について説明します。このページの手順は、設定ページの手順をすでに完了し、次のものが用意されていることを前提としています。

Maps 3D SDK for iOS が有効になっている Google Cloud プロジェクト
Maps 3D SDK for iOS の API キー
Xcode バージョン 16.0 以降（Maps 3D SDK for iOS パッケージが追加されていること）。

これらの前提条件の詳細については、設定をご覧ください。

より高度な Codelab に取り組む。

GitHub でその他のコードサンプルを確認する。

パート 1: 基本的な SwiftUI アプリを作成する

Xcode で新しいアプリを作成します。
[Product Name] を Hello3DWorld に設定し、組織 ID を com.example に設定します。パッケージ名は com.example.Hello3DWorld にする必要があります。
SwiftUI インターフェースを選択します。
Maps 3D ライブラリをアプリに追加します。設定セクションの手順をご覧ください。

パート 2: 地図を追加する

地球のシンプルな 3D 地図

ContentView.swift という名前のファイルを開きます。これは、アプリのエントリポイントであり、メインナビゲーションです。
SwiftUI と GoogleMaps3D パッケージをインポートします。
body 宣言内のすべてのコードを Map(mode: .hybrid) に置き換えます。

Map を初期化するために指定する必要がある最小限の初期構成は MapMode です。
- .hybrid
- .roadmap、または
- .satellite
ContentView.swift ファイルは次のようになります。
```
import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  var body: some View {
    Map(mode: .hybrid)
  }
}

#Preview {
  ContentView()
}
```

パート 3: API キーを設定する。

API キーは、地図が初期化される前に設定する必要があります。これを行うには、地図を含む View の init() イベントハンドラで Map.apiKey を設定します。

警告: API キーを外部または公開のソース管理にチェックインしないでください。
```
import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }

  var body: some View {
    Map(mode: .hybrid)
  }
}
```

パート 4: カメラを使用して地図ビューを制御する

3D マップビューは Camera クラスによって制御されます。このステップでは、位置、高度、方位、傾き、ロール、範囲を指定して地図表示をカスタマイズする方法を学びます。

initialCamera プロパティを含めるように Map() 関数呼び出しを変更します。initialCamera を初期化して、マンハッタンのダウンタウンのビューを表示します。

注: パラメータの順序は重要です。カメラは、最初に緯度、次に経度を指定して初期化されます。特に別のソースから貼り付ける場合は、それぞれに正しい値を指定してください。そうしないと、カメラが予期しない場所を表示することがあります。
```
import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
      center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
      heading: 52,
      tilt: 68,
      roll: 0.0,
      range: 1039,
      fieldOfView: .degrees(50)
    ), mode: .hybrid)
  }
}
```

上記のコードでは、次のパラメータの値が設定されます。

center: カメラの位置を表す LatLngAltitude
heading: カメラを向ける方向を北からの角度で指定します。
tilt: 傾斜角度（度単位）。0 は真上、90 は水平方向です。
roll: カメラの垂直面を基準としたロールの角度（度単位）。
range: 緯度、経度の位置からのカメラの距離（メートル単位）
fieldOfView: カメラの画角を表す角度

これらの追加パラメータを指定しない場合は、デフォルト値が使用されます。

カメラビューに 3D データをより多く表示するには、初期パラメータを設定して、より近くに傾斜したビューを表示します。

パート 5: アプリをプレビューして実行する

ニューヨーク市の基本的な 3D 地図

Xcode プレビューを追加する

プレビューは、シミュレータや外部デバイスを使用せずにアプリを表示して操作できる強力な XCode 機能です。

プレビューを追加するには、構造体の外部に #Preview {} コードブロックを追加します。
```
#Preview {
  ContentView()
}
```
アプリを実行する

アプリをビルドして実行します。

地図の読み込みとエラーの状態

Maps 3D SDK for iOS は、Map の状態を管理しながら、組み込みの視覚的なフィードバックを自動的に表示します。

読み込みオーバーレイ: 地図ビューが最初に初期化または読み込まれるときに、中央に進行状況インジケーターが表示されます。
エラーオーバーレイ: 地図の読み込みに失敗すると、エラーオーバーレイが表示されます。

Map で style(mapID:error:) を使用して Cloud ベースのマップのスタイル設定を適用する場合は、error クロージャを渡して、スタイルの読み込みエラーを処理できます。

地図タップイベントをリッスンする

地図上のタップイベントをリッスンするには、onTap(_:) 修飾子を Map に適用します。ユーザーが地図をタップすると、クロージャは MapTapInfo 値を受け取ります。この値は、location（LatLngAltitude）とタップされた content（MapTapInfo.Content.map または MapTapInfo.Content.place(id:)）を提供します。スポットの操作の詳細については、スポットを操作するをご覧ください。

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

お疲れさまでした

アプリに 3D マップを追加できました。

次に、カメラパスアニメーション、3D マーカー、ポリゴンなど、Maps 3D SDK for iOS の高度な機能について確認します。