Navigation SDK for iOS を使用すると、地図に表示する組み込みの UI コントロールと要素や、許可する操作を指定して、地図のユーザー エクスペリエンスを変更できます。Navigation UI の外観を変更することもできます。ナビゲーション UI の許容される変更に関するガイドラインについては、ポリシー ページを参照してください。
地図の UI コントロール
Navigation SDK には、Google マップ アプリ(iOS 版)のものと同様の組み込みの UI コントロールが用意されています。これらのコントロールの表示と非表示を切り替えるには、GMSUISettings クラスを使用します。このクラスに変更を加えると、直ちに地図に反映されます。
コンパス
Navigation SDK を使用して、特定の状況下で地図の右上にコンパス グラフィックを表示することができます。ユーザーがコンパスをクリックすると、カメラの方向がゼロの位置(デフォルトの向き)に戻る様子がアニメーション表示されてから、間もなくコンパスが消えます。
ナビゲーションが有効で、カメラモードが [追跡] に設定されている場合、コンパスは表示されたままになり、コンパスをタップすると、傾斜したカメラの視点と概要のカメラの視点が切り替わります。
ドライバーの注意散漫を防ぐため、ヘッダー(ポートレート モード)が拡大してコンパスのデフォルトの位置と競合する場合、コンパスは同じ位置に留まります。セカンダリ ヘッダーのカスタム コントロールまたはヘッダー アクセサリー ビューを追加すると、UI の競合を避けるためにコンパスが非表示になります。
コンパスは、日中モードと夜間モード、ダークモードをサポートしています。
コンパスは、バージョン 11.0.0 以降ではデフォルトで有効になっています。コンパスを無効にするには、GMSUISettings の compassButton プロパティを false に設定します。
Swift
mapView.settings.compassButton = false
Objective-C
mapView.settings.compassButton = NO;
現在地ボタン
現在地ボタンは、現在地ボタンが有効になっている場合にのみ、画面の右下に表示されます。ユーザーがボタンをクリックすると、ユーザーの位置情報がわかっている場合は、カメラがアニメーション表示でユーザーの現在地にフォーカスします。ボタンを有効にするには、GMSUISettings の myLocationButton プロパティを true に設定します。
Swift
mapView.settings.myLocationButton = true
Objective-C
mapView.settings.myLocationButton = YES;
[中央に移動] ボタン
ナビゲーションが有効になっている場合、ユーザーが地図ビューをスクロールすると、[中央に再配置] ボタンが表示されます。ユーザーがタップして地図を中央に再配置すると、このボタンは表示されなくなります。再センタリング ボタンを表示するには、GMSUISettings の recenterButtonEnabled プロパティを true に設定します。[再センタリング] ボタンが表示されないようにするには、recenterButtonEnabled を false に設定します。
Swift
mapView.settings.isRecenterButtonEnabled = true
Objective-C
mapView.settings.recenterButtonEnabled = YES;
地図 UI アクセサリー
Navigation SDK は、iOS 版 Google マップ アプリケーションに表示されるものと同様の UI アクセサリーをナビゲーション中に表示します。このセクションで説明するように、これらのコントロールの表示 / 非表示や外観を調整できます。ここで変更した内容は、ユーザーの次回の乗車時に反映されます。
ナビゲーション ヘッダーとフッター

ナビゲーション中、ナビゲーション ヘッダーは画面上部に表示され、ナビゲーション フッターは画面下部に表示されます。ナビゲーション ヘッダーには、ルート上の次の曲がり角の道路名と方向、およびその次の曲がり角の方向が表示されます。ナビゲーション フッターには、目的地までの推定時間と距離、および予定到着時刻が表示されます。
ナビゲーションのヘッダーとフッターの表示を切り替えたり、次のプロパティを使用してプログラムで色を設定したりできます。
navigationHeaderEnabled- ナビゲーション ヘッダーを表示するかどうかを制御します(デフォルトはtrue)。navigationFooterEnabled- ナビゲーション フッターを表示するかどうかを制御します(デフォルトはtrue)。navigationHeaderPrimaryBackgroundColor- ナビゲーション ヘッダーのメインの背景色を設定します。navigationHeaderSecondaryBackgroundColor- ナビゲーション ヘッダーのサブ背景色を設定します。
次のコードサンプルでは、ヘッダーとフッターの表示を有効にしてから、navigationHeaderPrimaryBackgroundColor を青に、navigationHeaderSecondaryBackgroundColor を赤に設定しています。
Swift
mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red
Objective-C
mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];
ナビゲーション アクセサリのヘッダー ビュー
セカンダリ ナビゲーション ヘッダービューを独自のカスタマイズされたアクセサリー ビューに置き換えることで、アプリをカスタマイズできます。これを行うには、GMSNavigationAccessoryView プロトコルを実装するビューを作成します。このプロトコルには、必須のメソッド -heightForAccessoryViewConstrainedToSize:onMapView: が 1 つあります。指定された mapView でビューに使用できる最大サイズが提供されるため、ビューに必要な高さを指定する必要があります。
このビューを setHeaderAccessoryView: を呼び出して mapView に渡すことができます。mapView は現在のビューをアニメーションで消去し、カスタムビューをアニメーションで表示します。カスタムビューを表示できるように、ナビゲーション ヘッダーが表示されている必要があります。
カスタム ヘッダー アクセサリー ビューを削除するには、nil を setHeaderAccessoryView: に渡します。
ビューのサイズをいつでも変更する必要がある場合は、invalidateLayoutForAccessoryView: を呼び出し、サイズを変更する必要があるビューを渡します。
例
次のコード例は、GMSNavigationAccessoryView プロトコルを実装するカスタムビューを示しています。このカスタムビューは、カスタム ナビゲーション ヘッダー アクセサリー ビューを設定するために使用されます。
Swift
class MyCustomView: UIView, GMSNavigationAccessoryView {
…
func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
// viewHeight gets calculated as the height your view needs.
return viewHeight
}
…
}
let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)
// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)
// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)
Objective-C
@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end
@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
// viewHeight gets calculated as the height your view needs.
return viewHeight;
}
…
@end
MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];
// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];
// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];
ローライト モードのヘッダーの色
Navigation SDK for iOS は、時刻とデバイスの現在地に基づいて推奨されるライトモードを計算し、推奨モードが変更されたとき(日の出や日の入りなど)に GMSNavigatorListener.didChangeSuggestedLightingMode リスナー メソッドを呼び出します。ローライト モードの動作は、次の方法でプログラムによって変更できます。
GMSMapView.lightingModeをGMSNavigationLightingMode値に設定することで、マップで通常モードと低照度モードが使用されるタイミングを制御できます。照明モードの自動切り替えを有効にする方法については、通常モードと低照度モードを構成するをご覧ください。GMSUISettingsのnavigationHeaderPrimaryBackgroundColorNightModeプロパティとnavigationHeaderSecondaryBackgroundColorNightModeプロパティを設定して、ローライト モードでのナビゲーション ヘッダーのメインとサブの背景色をカスタマイズします。
経路リスト
アプリでルート案内を提供できます。次の例は、これを行う方法の 1 つを示しています。これらの手順は、独自の実装によって異なる場合があります。
GMSNavigator(ナビゲーター)のsetDestinationsが正常に完了し、ナビゲーターのguidanceActiveが有効になったら、エントリ ポイント ボタンを有効にします。- ユーザーがエントリ ポイント ボタンをタップしたら、
GMSMapView(mapView)に関連付けられたナビゲーターを使用してGMSNavigationDirectionsListController(コントローラ)を作成します。 - コントローラを
UIViewController(ビュー コントローラ)のインスタンスに追加し、directionsListViewをビュー コントローラのサブビューとして追加します。コントローラのreloadDataメソッドとinvalidateLayoutメソッドは、UICollectionViewと同様に呼び出す必要があります。 - ビュー コントローラをアプリのビュー コントローラ階層にプッシュします。
次のコード例は、DirectionsListViewController を追加する方法を示しています。
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Add the directionsListView to the host view controller's view.
let directionsListView = directionsListController.directionsListView
directionsListView.frame = self.view.frame
self.view.addSubview(directionsListView)
directionsListView.translatesAutoresizingMaskIntoConstraints = false
directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
...
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Make sure data is fresh when the view appears.
directionsListController.reloadData()
...
}
override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
super.willTransition(to: newCollection, with: coordinator)
// Invalidate the layout during rotation.
coordinator.animate(alongsideTransition: {_ in
self.directionsListController.invalidateLayout()
})
...
}
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Add the directionsListView to the host view controller's view.
UIView *directionsListView = _directionsListController.directionsListView;
directionsListView.frame = self.view.bounds;
[self.view addSubview:directionsListView];
directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
[directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
[directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
[directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
[directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
...
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// Make sure data is fresh when the view appears.
[_directionsListController reloadData];
...
}
- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
^void(id <UIViewControllerTransitionCoordinatorContext>context) {
[_directionsListController invalidateLayout];
};
// Invalidate the layout during rotation.
[coordinator animateAlongsideTransition:animationBlock
completion:nil];
...
}
...
乗車中の進行状況バー

ルート進行状況バーは、ナビゲーションの開始時に地図の開始/先頭側に表示される縦棒です。有効にすると、ユーザーの目的地と現在地とともに、ルート全体の概要が表示されます。
これにより、ユーザーはズームインしなくても、交通状況などの今後の問題をすばやく予測できます。必要に応じてルートを変更できます。ユーザーがルートを変更すると、進行状況バーがリセットされ、その時点から新しいルートが開始されたかのように表示されます。
乗車中の進行状況バーには、次のステータス インジケーターが表示されます。
トラフィック ステータス - 今後のトラフィックのステータス。
現在地 - ルート上のドライバーの現在地。
ルートの経過部分 - ルートの経過部分。
GMSUISettings で navigationTripProgressBarEnabled プロパティを設定して、ルートの進行状況バーを有効にします。
Swift
mapView.settings.isNavigationTripProgressBarEnabled = true
Objective-C
mapView.settings.navigationTripProgressBarEnabled = YES;
ルートの進行状況バーの位置
- バーの左側は、スピードメーター、Google ロゴ、再センタリング ボタン(表示されている場合)の左側とほぼ揃っています。幅は 12 pt です。
- ルートの進行状況バーは、画面の垂直方向のスペースに応じて動的に変化します。バーの下端は画面の下端から 210 pt の位置に配置されます。ルートの進行状況バーの上部は、画面の上部から 170 pt 以上離れた位置にあり、バーの高さは最大 400 pt です。
- ルートの進行状況バーがナビゲーション ヘッダーや他のナビゲーション UI 要素と重なる場合は、それらの要素の下に表示されます。
Prompt Visibility API(試験運用版)
プロンプトの可視性 API を使用すると、Navigation SDK によって生成された UI 要素と独自のカスタム UI 要素の競合を回避できます。Navigation SDK の UI 要素が表示される直前と、要素が削除された直後にコールバックを受け取るリスナーを追加します。コードサンプルを含む詳細については、リアルタイムの運行状況を構成するページの Prompt Visibility API セクションをご覧ください。
速度計の制御
ナビゲーションが有効で、移動手段が運転に設定されている場合、Navigation SDK for iOS では、地図の下隅に速度制限コントロールが表示され、現在の速度制限が表示されます。ドライバーが制限速度を超えると、コントロールが展開され、ドライバーの現在の速度を示す 2 つ目の速度計が表示されます。
アラートレベルを設定すると、ドライバーが指定された量だけ速度制限を超えたときに、速度計の表示形式を変更できます。たとえば、運転者が制限速度を時速 5 マイル超えた場合は現在の速度を赤色のテキストで表示し、制限速度を時速 10 マイル超えた場合は赤色の背景で表示するように指定できます。
速度制限コントロールを表示するには、GMSUISettings の shouldDisplaySpeedometer プロパティを true に設定します。速度制限コントロールの表示を無効にするには、shouldDisplaySpeedometer を false に設定します。
Swift
mapView.settings.shouldDisplaySpeedometer = true
Objective-C
mapView.settings.shouldDisplaySpeedometer = YES;
スピードメーターのアラートの設定の詳細については、スピードメーターのアラートを構成するをご覧ください。
目的地のマーカー
特定のルートの目的地マーカーの表示と非表示を切り替えるには、GMSUISettings の showsDestinationMarkers プロパティを設定します。次の例は、目的地のマーカーをオフにする方法を示しています。
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
地図エクスペリエンスの機能
Navigation SDK を使用すると、ユーザーのナビゲーション エクスペリエンスをさらにカスタマイズできます。インスタンスに加えた変更は、ユーザーがアプリを次回更新したときに反映されます。
目的地のハイライト表示と入口
placeID を使用して目的地が作成されると、目的地の建物がハイライト表示され、可能な場合は入口アイコンが表示されます。これらの視覚的な手がかりは、ユーザーが目的の場所を識別して移動するのに役立ちます。
placeID を使用してデスティネーションを作成するには、placeID を受け取る GMSNavigationWaypoint イニシャライザのいずれかを使用します。たとえば、ルートをナビゲートするチュートリアルで作成された目的地には、目的地をハイライト表示する機能と、入り口ラベル(利用可能な場合)が含まれています。
ナビゲーション中の建物の 3D 表示
デフォルトでは、ナビゲーション中に建物の 3D 表示がオンになっています。この機能を無効にするには、buildingsEnabled を false(Swift)または NO(Objective-C)に設定します。
デフォルトの地図ジェスチャーを無効にする
地図上のデフォルトの操作を無効にするには、GMSUISettings クラスのプロパティを設定します。このクラスは、GMSMapView のプロパティとして利用できます。次のジェスチャーはプログラムで有効にしたり無効にしたりすることができます。なお、操作を無効にしても、カメラ設定へのプログラムによるアクセスは制限されません。
scrollGestures- スクロール ジェスチャーを有効にするかどうかを制御します。有効にすると、ユーザーはスワイプしてカメラをパンできます。zoomGestures- ズーム操作を有効にするかどうかを制御します。有効にすると、ユーザーはダブルタップ、2 本指タップ、ピンチ操作でカメラをズームできます。scrollGesturesが有効になっているときにダブルタップまたはピンチ操作を行うと、カメラが指定されたポイントにパンされることがあります。tiltGestures- 傾斜ジェスチャーを有効にするか無効にするかを制御します。有効にすると、2 本の指で上下にスワイプしてカメラを傾けることができます。rotateGestures- 回転操作を有効にするかどうかを制御します。有効にすると、ユーザーは 2 本の指で回転ジェスチャーを行うことで、カメラを回転させることができます。
この例では、パンとズームの両方のジェスチャーが無効になっています。
Swift
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
Objective-C
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
コントロールと UI 要素を配置する
次のプロパティを使用して、ナビゲーション ヘッダーとフッターの位置を基準に、コントロールやその他の UI 要素を配置できます。
navigationHeaderLayoutGuidenavigationFooterLayoutGuidebottomTrailingButtonsLayoutGuide
次のコード例は、レイアウト ガイドを使用して、地図ビューに 2 つのラベルを配置する方法を示しています。
Swift
/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true
/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true
Objective-C
/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;
/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;
bottomTrailingButtonsLayoutGuide を使用してリアルタイムの運行状況の報告ボタンを配置する方法の例については、リアルタイムの運行状況を構成するをご覧ください。
別の経路を非表示にする
ユーザー インターフェースに表示される情報が多すぎる場合は、代替ルートの表示数をデフォルト(2 つ)より減らすか、代替ルートをまったく表示しないことで、表示される情報を減らすことができます。このオプションは、GMSNavigationRoutingOptions を構成し、次の列挙値のいずれかを使用して alternateRoutesStrategy を設定することで、ルートを取得する前に構成できます。
| 列挙値 | 説明 |
|---|---|
| GMSNavigationAlternateRoutesStrategyAll | デフォルト。最大 2 つの代替ルートが表示されます。 |
| GMSNavigationAlternateRoutesStrategyOne | 別のルートを 1 つ表示します(利用可能な場合)。 |
| GMSNavigationAlternateRoutesStrategyNone | 別のルートを非表示にします。 |
例
次のコード例は、代替ルートを完全に非表示にする方法を示しています。
Swift
let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
routingOptions: routingOptions) { routeStatus in
...
}
Objective-C
GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
routingOptions:routingOptions
callback:^(GMSRouteStatus routeStatus){...}];