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

基本的な Place Autocomplete コンポーネント

Places UI キットの Basic Place Autocomplete コンポーネントを使用すると、ユーザーが場所を選択したときにプレイス ID を返す個々の UI コンポーネントを追加できます。このコンポーネントは、ユーザーがクエリを入力するための検索バーを提供する全画面カバーです。ユーザーが入力すると、検索バーの下に予測入力候補のリストが表示されます。ユーザーが場所をタップすると、場所 ID のみを含む場所オブジェクトがデベロッパーに返されます。このコンポーネントはカスタマイズ可能です。

このコンポーネントは、AutocompleteFilter 構造体を介して地理的境界とその他の検索パラメータを取得します。

レスポンスは、placeID フィールドのみが入力された Place 構造体を提供します。

基本的な Place Autocomplete コンポーネントには、リストの密度と位置アイコンを含めるかどうかというカスタマイズ オプションがあります。AutocompleteUICustomization 構造体を使用してコンポーネントをカスタマイズします。

Basic Place Autocomplete コンポーネントは、単独で使用することも、他の Google Maps Platform API やサービスと組み合わせて使用することもできます。

課金

コンポーネントが開いてクエリが実行されるたびに課金されます。セッションが終了するか、リストから場所が選択されない限り、そのセッションに対して再度請求されることはありません。

アプリに基本的なオートコンプリート コンポーネントを追加する

Places UI Kit を使用せずに Place Autocomplete（新版）を使用する場合と同様に、オートコンプリート フィルタ パラメータ（返すタイプ、結果を制限する国、結果の地域座標、ユーザーの出発地が設定されている場合は距離情報など）を設定します。詳しい手順と、予測入力フィルタを作成するコードの例については、Place Autocomplete（新版）のドキュメントをご覧ください。

オートコンプリート フィルタを作成したら、UI のカスタマイズを含む構造体を作成できます。カスタマイズ オプションと手順をご覧ください。

次に、カスタマイズした Basic Autocomplete コンポーネントを起動するボタンを作成します。

Swift

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

完全な例をご覧ください。

基本的な予測入力コンポーネントをカスタマイズする

リストの密度

2 行のリストまたは複数行のリストを表示できます。AutocompleteUICustomization クラスで AutocompleteListDensity（.twoLine または .multiLine）のオプションを使用します。リストの密度を指定しない場合、コンポーネントは 2 行のリストを表示します。

位置情報アイコン

検索結果リストにデフォルトのスポット アイコンを表示するかどうかを選択できます。AutocompleteUICustomization クラスで AutocompleteUIIcon（.defaultIcon または .noIcon）のオプションを使用します。

基本的な予測入力コンポーネントにカスタマイズを追加する

AutocompleteUICustomization クラスを使用して、基本的な自動補完コンポーネントをカスタマイズします。

Swift

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
)

例

この例では、ボタンを含むカスタムの基本的な自動補完コンポーネントを作成します。デフォルトのアイコンと 2 行のリスト密度が選択されています。オートコンプリート フィルタは、ラスベガスとその周辺の会計関連の場所を検索するように設定されています。

Swift

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon)
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }