プラットフォームを選択: 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）のオプションを使用します。

テーマをカスタマイズする

デフォルトのスタイル属性をオーバーライドするテーマを指定できます。Place Details コンポーネントの色、タイポグラフィ、間隔、境界線、角をカスタマイズできます。デフォルトは PlacesMaterialTheme です。

オーバーライドされていないテーマ属性は、デフォルトのスタイルを使用します。

Places UI Kit はデフォルトでダークモードを提供するため、ダークモードとライトモードの両方をカスタマイズする必要がある場合があります。ダークテーマをカスタマイズするには、.dark と attribution.darkModeColor の値をカスタムテーマに追加します。

テーマ設定について詳しくは、カスタム スタイリングのセクションをご覧ください。

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

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

Swift

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

例

基本的な予測入力コンポーネントを追加する

重要: ユーザーがボタンをクリックしたときにカスタマイズしたコンポーネントが表示されるようにするには、showWidget の初期値を false に設定します。

この例では、ボタンを含むカスタムの基本的なオートコンプリート コンポーネントを作成します。デフォルトのアイコン、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,
        theme: PlacesMaterialTheme()
      )
      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)
        }
      }
    }
  }

テーマをカスタマイズする

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}