ナビゲーション UI を変更する

Navigation SDK for iOS を使用すると、組み込みの UI コントロールと要素の中から地図に表示するものや、許可する操作を指定して、地図のユーザー エクスペリエンスを変更できます。ナビゲーション UI の外観を変更することもできます。ナビゲーション UI で許可される変更に関するガイドラインについては、ポリシー ページをご覧ください。

地図の UI コントロール

Navigation SDK には、iOS 版 Google マップ アプリのものと同様の組み込み UI コントロールが用意されています。これらのコントロールの表示と非表示を切り替えるには、GMSUISettings クラスを使用します。このクラスに変更を加えると、直ちに地図に反映されます。

コンパス

Navigation SDK には、特定の状況下で、有効になっている場合にのみ地図の右上に表示されるコンパス グラフィックがあります。コンパスは、カメラの向きを真北以外の方向（ゼロ以外の方位）として指定している場合にのみ表示されます。ユーザーがコンパスをクリックすると、カメラの方向指定がゼロの位置（デフォルトの向き）に戻り、その後、コンパスが徐々に消えていきます。

ナビゲーションが有効で、カメラモードが [追従] に設定されている場合、コンパスは引き続き表示され、コンパスをタップすると、傾斜カメラと概要カメラの視点が切り替わります。

コンパスはデフォルトで無効になっています。コンパスを有効にするには、GMSUISettings の compassButton プロパティを true に設定します。ただし、コンパスが常に表示されるように設定することはできません。

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

現在地ボタン

現在地ボタンは、現在地ボタンが有効になっている場合にのみ、画面の右下に表示されます。ユーザーがボタンをクリックすると、ユーザーの現在地が現在わかっている場合は、カメラがアニメーション化してユーザーの現在地にフォーカスします。ボタンを有効にするには、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];

経路リスト

アプリでルート案内を提供できます。次の例は、その方法の 1 つを示しています。これらの手順は、実装内容によって異なる場合があります。

  1. GMSNavigator（ナビゲーター）の setDestinations が正常に完了し、ナビゲーターの guidanceActive が有効になったら、エントリ ポイント ボタンを有効にします。
  2. ユーザーがエントリ ポイント ボタンをタップすると、GMSMapView（mapView）に関連付けられたナビゲータを使用して GMSNavigationDirectionsListController（コントローラ）を作成します。
  3. コントローラを UIViewController のインスタンス（ビュー コントローラ）に追加し、directionsListView をビュー コントローラのサブビューとして追加します。コントローラ上の reloadData メソッドと invalidateLayout メソッドは、UICollectionView の場合と同様に呼び出す必要があります。
  4. ビュー コントローラをアプリのビュー コントローラ階層にプッシュします。

次のコードサンプルは、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)
  // Ensure 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];
  // Ensure 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;

信号機と停止標識

ナビゲーション中に表示される停止標識と信号機。

mapView で信号と停止標識を有効にできます。この機能を使用すると、ルート上の信号機や停留所のアイコンを表示できるため、より効率的で正確なルートを計画できます。

デフォルトでは、Navigation SDK for iOS では信号と停車標識は無効になっています。この機能を有効にするには、各オプション（showsTrafficLights と showsStopSigns）の GMSMapView 設定を個別に呼び出します。


Swift

mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true

Objective-C

mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;

スピードメーター コントロール

ナビゲーションが有効で、移動モードが運転に設定されている場合、iOS 版 Navigation SDK では、地図の下隅に現在の制限速度を示す制限速度コントロールが表示されます。ドライバーが速度制限を超えると、コントロールが拡大し、ドライバーの現在の速度を示す 2 つ目のスピードメーターが表示されます。

アラートレベルを設定すると、ドライバーが制限速度を指定された量超過したときに、スピードメーター表示のフォーマットを変更できます。たとえば、ドライバーが制限速度を 5 mph 超えた場合は現在の速度を赤色のテキストで表示し、制限速度を 10 mph 超えた場合は赤色の背景で表示するように指定できます。

速度制限コントロールを表示するには、GMSUISettings の shouldDisplaySpeedometer プロパティを true に設定します。制限速度コントロールの表示を無効にするには、shouldDisplaySpeedometer を false に設定します。

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

スピードメーターのアラートの設定について詳しくは、スピードメーターのアラートを設定するをご覧ください。

デスティネーション マーカー

特定のルートの目的地マーカーの表示と非表示を切り替えるには、GMSUISettings の showsDestinationMarkers プロパティを設定します。次の例は、目的地マーカーをオフにする方法を示しています。

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

地図の機能

Navigation SDK を使用すると、ユーザー向けのナビゲーション エクスペリエンスをさらにカスタマイズできます。インスタンスに加えた変更は、ユーザーがアプリを次回更新するときに反映されます。

デフォルトの地図ジェスチャーを無効にする

地図のデフォルトのジェスチャーを無効にするには、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 要素をナビゲーション ヘッダーとフッターの位置に相対的に配置するには、次のプロパティを使用します。

  • navigationHeaderLayoutGuide
  • navigationFooterLayoutGuide

次のコードサンプルは、レイアウト ガイドを使用して地図ビューにラベルのペアを配置する方法を示しています。

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;

別の経路を非表示にする

ユーザー インターフェースに情報が多すぎて混乱する場合は、デフォルト（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){...}];