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

リアルタイムの交通情報を構成する

リアルタイムの交通情報とは、ルート上の交通情報をユーザーに通知する機能の集まりです。ユーザーは、遭遇した交通情報を報告したり、確認したりできます。 交通情報の例としては、自動車事故、交通渋滞、警察や自動速度取締機の設置、工事、車線規制、特定の気象条件などが挙げられます。このページでは、リアルタイムの交通情報機能とその構成オプションについて説明します。カスタム ナビゲーション UI を使用するアプリに関する考慮事項も含まれます。

リアルタイムの交通情報機能

Navigation SDK には、コア ナビゲーション エクスペリエンスの一部として、次のリアルタイムの交通情報機能が含まれています。

これらの機能は構成可能で、デフォルトで有効になっています。以降のセクションでは、これらの機能と利用可能な構成オプションについて詳しく説明します。

ルート上のインタラクティブな交通情報吹き出し

アプリがルートの概要またはナビゲーション使用時にルートを表示すると、現在の交通情報がルート上の吹き出しとして表示されます。吹き出しには、交通情報の種類を示すアイコンが含まれます。

ルート沿いの吹き出し

shouldDisplayPrompts を使用して、ルート上の交通情報吹き出しの表示を制御できます。この設定は、ユーザーが交通情報に近づいたときに自動アラートを表示するかどうかにも影響します。

mapView.navigator.shouldDisplayPrompts = true

ユーザーが吹き出しをタップしたときに交通情報の詳細を表示する

ユーザーは吹き出しをタップして、交通情報の詳細を含む情報カードを表示できます。 交通情報の種類、最後に報告された時刻、場合によっては交通情報がまだ存在するかどうかを投票するオプションなどです。表示される情報カードには 2 種類あり 、ユーザーがナビゲーションを使用しているかどうかによって異なります。構成 オプションは種類ごとに異なります。

ナビゲーションを開始する前のルートの概要に表示される吹き出しの情報カード

ナビゲーションを開始する前に、ユーザーがルートの概要の吹き出しをタップすると、交通情報の詳細を含む情報カードが表示されます。

概要情報カード

`showsIncidentCards` を使用すると、ユーザーがルートの概要の交通情報吹き出しをタップして詳細を表示できるかどうかを制御できます。

mapView.settings.showsIncidentCards = true

ナビゲーション使用時に表示される吹き出しの情報カード

ナビゲーション使用時にルート上に交通情報吹き出しが表示された場合、ユーザーは吹き出しをタップして、交通情報の種類、最後に報告された時刻、交通情報がまだ存在するかどうかを投票するボタンなど、交通情報の詳細を含む情報カードを表示できます。ユーザーから送信された投票は Google によって処理され、他の Google マップ ユーザーと Navigation SDK ユーザーの地図上に表示されることがあります。また、交通情報の表示を継続するかどうかを判断するために使用されることもあります。

アクティブなナビの情報カード

shouldDisplayPrompts を使用すると、ナビゲーション使用時の交通情報吹き出しの表示とタップの可否を制御できます。この設定は、ルート上の 吹き出しの表示と、ユーザーが交通情報に近づいたときに 自動アラートを表示するかどうかにも影響します。

mapView.navigator.shouldDisplayPrompts = true

ナビゲーション使用時の投票機能付きの自動交通情報アラート

ナビゲーション使用時に、ユーザーがルート上の交通情報に近づくと、 交通情報に関する情報と、交通情報がまだ存在するかどうかを投票するボタンを含むプロンプトが表示されます。ユーザーから送信された投票は Google によって処理され、他の Google マップ ユーザーと Navigation SDK ユーザーの地図上に表示されることがあります。また、交通情報の表示を継続するかどうかを判断するために使用されることもあります。

アクティブなナビゲーション情報カード

shouldDisplayPrompts を使用すると、ナビゲーション使用時のアラート プロンプトの表示を構成できます。この設定は、 ルート上の吹き出しの表示にも影響します。 

mapView.navigator.shouldDisplayPrompts = true

ナビゲーション使用時の交通情報報告

ナビゲーション モードでは、ナビゲーション UI にボタンが表示され、ユーザーはルート上の新しい交通情報を報告できます。ユーザーがボタンをタップすると、報告できる交通情報の種類を示すメニューが表示されます。ユーザーが送信した報告は Google によって処理され、他の Google マップ ユーザーと Navigation SDK ユーザーの地図上に表示されることがあります。

報告ボタン レポート メニュー

標準の報告ボタンの表示と非表示を切り替える

navigationReportIncidentButtonEnabled を使用すると、ナビゲーション使用時の標準の報告ボタンの表示を構成できます。 

// Enables the incident reporting FAB to show in situations where incident
// reporting is possible.
mapView.settings.navigationReportIncidentButtonEnabled = true

カスタムの報告ボタンを追加する

標準の交通情報報告ボタンの代わりに、カスタムの報告ボタンをナビゲーション UI に追加できます。ユーザーがカスタムボタンをクリックすると、報告メニューの表示をトリガーできます。presentReportIncidentsPanelカスタムの報告ボタンを追加する前に、reportIncidentsAvailable を呼び出して、アプリがナビゲーションを使用していることと、ユーザーが報告が有効になっている国にいることを確認してください。どちらかが当てはまらない場合、報告メニューは表示されません。 

  // Check if reporting is available before displaying your button
  let isReportingAvailable = mapview.isIncidentReportingAvailable()
  customReportingIncidentButton.isHidden = !isReportingAvailable
  customReportingIncidentButton.addTarget(self, action: #selector(didTapReportIncidentButton), for: .touchUpInside)
  
  // Trigger the reporting flow if the button is clicked
  func didTapReportIncidentButton() {
          mapView.presentReportIncidentsPanel(self) { [weak self] error in
              guard let self = self else { return }
              if let error = error as NSError? {
                  if error.domain == GMSMapViewPresentReportIncidentPanelErrorDomain {
                      let errorCode = GMSMapViewPresentReportIncidentPanelErrorCode(rawValue: error.code)
                      
                      switch errorCode {
                      case .internal:
                          self.showErrorMessage(
                              title: "Error Presenting Report Incident Panel",
                              message: "An internal error occurred."
                          )
                      case .reportingNotAvailable:
                          self.showErrorMessage(
                              title: "Error Presenting Report Incident Panel",
                              message: "Reporting is not available."
                          )
                      case .none:
                          self.showErrorMessage(
                              title: "Error Presenting Report Incident Panel",
                              message: "An unknown error occurred."
                          )
                      }
                  } else {
                      // Handle other potential errors (e.g., network errors)
                      self.showErrorMessage(
                          title: "Error Presenting Report Incident Panel",
                          message: "An unexpected error occurred: \(error.localizedDescription)"
                      )
                  }
              }
              // If error is nil, the panel was presented successfully. You can add any extra logic here.
          }
     }

カスタム ナビゲーション UI を操作する

Navigation SDK の実装にカスタム UI 要素が含まれている場合は、競合を避けるためにリアルタイムの交通情報要素を考慮する必要があります。

報告ボタンの位置

デフォルトでは、交通情報報告ボタンは地図の下端/末尾の隅に配置されます。左から右に向かう言語の場合は右側、右から左に向かう言語の場合は左側です。カスタム UI 要素のスペースを確保するために報告ボタンを移動する必要がある場合は、bottomTrailingButtonsLayoutGuide を使用します。

Swift

// Create a new layout guide
let topRightLayoutGuide = UILayoutGuide()
self.view.addLayoutGuide(topRightLayoutGuide)

// Activate constraints using fixed constants here as an example
// assuming the current reporting button is of fixed height
topRightLayoutGuide.topAnchor.constraint(equalTo: _mapView.navigationHeaderLayoutGuide.bottomAnchor, constant: 50).isActive = true
topRightLayoutGuide.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -14).isActive = true

// Assign the layout guide
_mapView.bottomTrailingButtonsLayoutGuide = topRightLayoutGuide

// Create an alternate layout guide to use when the header and the footer are not full width
let topRightAlternateLayoutGuide = UILayoutGuide()
self.view.addLayoutGuide(topRightAlternateLayoutGuide)

// Activate constraints using fixed constants here as an example
// assuming the current RTD button is of fixed height
topRightAlternateLayoutGuide.topAnchor.constraint(equalTo: _mapView.navigationHeaderLayoutGuide.bottomAnchor, constant: 20).isActive = true
topRightAlternateLayoutGuide.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true

// Assign the layout guide
_mapView.bottomTrailingButtonsAlternateLayoutGuide = topRightAlternateLayoutGuide

Objective-C

// Create a new layout guide
UILayoutGuide *topRightLayoutGuide = [[UILayoutGuide alloc] init];
[self.view addLayoutGuide:topRightLayoutGuide];

// Activate constraints using fixed constants here as an example
// assuming the current RTD button is of fixed height
[[topRightLayoutGuide.topAnchor
    constraintEqualToAnchor:_mapView.navigationHeaderLayoutGuide.bottomAnchor
                   constant:50]
    setActive:YES];

[[topRightLayoutGuide.trailingAnchor
    constraintEqualToAnchor:self.view.safeAreaLayoutGuide.trailingAnchor
                   constant:-14]
    setActive:YES];

// Assign the layout guide
_mapView.bottomTrailingButtonsLayoutGuide = topRightLayoutGuide;

// Create an alternate layout guide to use when the header and the footer are not full width
UILayoutGuide *topRightAlternateLayoutGuide = [[UILayoutGuide alloc] init];
[self.view addLayoutGuide:topRightAlternateLayoutGuide];

// Activate constraints using fixed constants here as an example
// assuming the current RTD button is of fixed height
[[topRightAlternateLayoutGuide.topAnchor
    constraintEqualToAnchor:_mapView.navigationHeaderLayoutGuide.bottomAnchor
                   constant:50]
    setActive:YES];

[[topRightAlternateLayoutGuide.trailingAnchor
    constraintEqualToAnchor:self.view.safeAreaLayoutGuide.trailingAnchor
                   constant:-14]
    setActive:YES];

// Assign the layout guide
_mapView.bottomTrailingButtonsAlternateLayoutGuide = topRightAlternateLayoutGuide;

プロンプト表示 API（試験運用版）

プロンプト表示 API を使用すると、Navigation SDK UI 要素が表示される前と、要素が削除された直後にコールバックを受信するリスナーを追加することで、Navigation SDK によって生成された UI 要素と独自のカスタム UI 要素の競合を回避できます。情報カード、プロンプト、交通情報報告メニューなどのリアルタイムの交通情報要素と、Navigation SDK によって生成されたその他の通知のコールバックを受信できます。

Swift

// Additional methods added to GMSNavigatorListener
...
func navigatorWillPresentPrompt(_ navigator: GMSNavigator) {
  // Hide any sort of custom UI element.
}

func navigatorDidDismissPrompt(_ navigator: GMSNavigator) {
  // Show any sort of custom UI element.
}
...

Objective-C

// Additional methods added to GMSNavigatorListener
...
- (void)navigatorWillPresentPrompt:(GMSNavigator *)navigator {
  // Hide any sort of custom UI element.
}

- (void)navigatorDidDismissPrompt:(GMSNavigator *)navigator {
  // Show any sort of custom UI element.
}
...