// use placeSearchViewRequest = .searchNearby(...) to configure a searchNearby request@StateprivatevarletplaceSearchViewRequest=.searchByText(SearchByTextRequest(textQuery:"Googleplex",placeProperties:[.all],locationBias:CircularCoordinateRegion(center:CLLocationCoordinate2D(latitude:0,longitude:0),radius:0)))
privateletconfiguration=PlaceSearchConfiguration(content:[.address,.rating,.media(size:.large)],preferTruncation:true,// default is falsetheme:PlacesMaterialTheme(),attributionPosition:.bottom,// default is topselectable:true// default is false)
structPlaceSearchDemoView:View{privateletconfiguration=PlaceSearchConfiguration(content:[.address(),.rating(),.type(),.media(size:.large)],preferTruncation:true,// default is falsetheme:PlacesMaterialTheme(),attributionPosition:.bottom,// default is topselectable:true// default is false)// can also do let placeSearchViewRequest = .searchNearby(...) to configure a searchNearby request@StateprivatevarplaceSearchViewRequest:PlaceSearchViewRequest=.searchByText(SearchByTextRequest(textQuery:"Googleplex",placeProperties:[.all],locationBias:CircularCoordinateRegion(center:CLLocationCoordinate2D(latitude:0,longitude:0),radius:0)))varbody:someView{PlaceSearchView(orientation:.horizontal,// default is verticalrequest:$placeSearchViewRequest,configuration:configuration).onLoad{placesinprint("places: \(places)")}.onRequestError{errorinprint("error: \(error)")}.onPlaceSelected{placeinprint("place: \(place)")}}}
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[],[],null,["Select platform: [Android](/maps/documentation/places/android-sdk/place-search-ui-kit \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/place-search-ui-kit \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/places-ui-kit/place-list \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nPlace Search component\n======================\n\n\nThe Place Search component of the Places UI Kit renders the results of a place search in a list.\n\n\nYou can customize the Place Search list. You can specify:\n\n- The content to display\n- Media size in vertical orientation\n- Text truncation\n- The orientation\n- Theme overrides that match your brand and app's design language\n- The position of the attribution\n- Whether a place is selectable\n\n\nYou can also customize the request to perform either a [`Search by text request`](/maps/documentation/places/ios-sdk/reference/swift/Structs/SearchByTextRequest) or a [`Search Nearby request`](/maps/documentation/places/ios-sdk/reference/swift/Structs/SearchNearbyRequest).\n\nBilling\n-------\n\n\nYou are billed each time the `SearchByTextRequest()` or `PlaceSearchViewRequest()` binding value is changed.\n\nAdd Place Search to your app\n----------------------------\n\n| **Tip:** [See the complete example](/maps/documentation/places/ios-sdk/place-search-ui-kit#example).\n\n\nAdd the Place Search widget using the `PlaceSearchView class`. \n\n### Swift\n\n```swift\nPlaceSearchView(\n orientation: .horizontal, // default is vertical\n request: $placeSearchViewRequest,\n configuration: configuration\n)\n```\n\n\nWhen you want your app to load a text search or nearby search result, update your `PlaceSearchViewRequest` value. \n\n### Swift\n\n```swift\n// use placeSearchViewRequest = .searchNearby(...) to configure a searchNearby request\n\n @State private var let placeSearchViewRequest = .searchByText(\n SearchByTextRequest(\n textQuery: \"Googleplex\",\n placeProperties: [.all],\n locationBias: CircularCoordinateRegion(\n center: CLLocationCoordinate2D(latitude: 0, longitude: 0),\n radius: 0\n )\n )\n )\n \n```\n\n\nYou can also optionally receive callbacks when the component loads, a place is selected, or when there is an error loading the component. \n\n### Swift\n\n```swift\n.onLoad { places in\n print(\"places: \\(places)\")\n}\n.onRequestError { error in\n print(\"error: \\(error)\")\n}\n.onPlaceSelected { place in\n print(\"place: \\(place)\")\n}\n \n```\n\nCustomize the Place Search component\n------------------------------------\n\n### Customize content\n\nYou must specify which content your component will display. **Note:** The Place name will always appear.\n\n\nThis example configures the component to display the address and rating of the Place. \n\n### Swift\n\n```swift\nprivate let configuration = PlaceSearchConfiguration(\n content: [.address(), .rating()]\n)\n```\n\n\nYou can also optionally customize the following aspects of the content that appears in your Place Search component:\n\n- [`content`](/maps/documentation/places/ios-sdk/reference/swift/Enums/PlaceSearchContent): The content shown in the component.\n- [`mediaSize`](/maps/documentation/places/ios-sdk/reference/swift/Enums/PlaceSearchContent#mediasize:): The photo size in the vertical orientation of the fragment. The default is small. Specified in content.\n- [`preferTruncation`](/maps/documentation/places/ios-sdk/reference/swift/Structs/PlaceSearchConfiguration#prefertruncation): Whether to truncate text of each Place Details view. The default is false.\n- [`theme`](/maps/documentation/places/ios-sdk/reference/swift/Structs/PlaceSearchConfiguration#theme): Your custom theme that inherits from PlacesMaterialTheme. Learn more about theming.\n- [`attributionPosition`](/maps/documentation/places/ios-sdk/reference/swift/Structs/PlaceSearchConfiguration#attributionposition): Whether to show the Google Maps attribution at the top or bottom of the component. The default is .top.\n- [`selectable`](/maps/documentation/places/ios-sdk/reference/swift/Structs/PlaceSearchConfiguration#selectable): Whether each place in the list is selectable. If it is selectable, `onPlaceSelected` closure will be called after a place is selected. The default is false.\n\n\nAdd your customization configuration to [`PlaceSearchConfiguration`](/maps/documentation/places/ios-sdk/reference/swift/Structs/PlaceSearchConfiguration). \n\n### Swift\n\n```swift\nprivate let configuration = PlaceSearchConfiguration(\n content: [.address, .rating, .media(size: .large)],\n preferTruncation: true, // default is false\n theme: PlacesMaterialTheme(),\n attributionPosition: .bottom, // default is top\n selectable: true // default is false\n)\n \n```\n\n### Customize orientation\n\n\nThe default orientation is vertical. You can specify a horizontal orientation in `PlaceSearchView`. \n\n### Swift\n\n```swift\nPlaceSearchView(\n orientation: .horizontal, // default is vertical\n request: $placeSearchViewRequest,\n configuration: configuration\n)\n \n```\n\n### Customize the theme\n\n\nYou can specify a theme that overrides any of the default style attributes. The default is [`PlacesMaterialTheme`](/maps/documentation/places/ios-sdk/reference/swift/Structs/PlacesMaterialTheme). See the [Place Details component documentation](/maps/documentation/places/ios-sdk/place-details-ui-kit#customize-place-details) for more information on theming. \n\n### Swift\n\n```swift\n@Environment(\\.colorScheme) var colorScheme\nvar theme: PlacesMaterialTheme {\n if customTheme {\n var theme = PlacesMaterialTheme()\n var color = PlacesMaterialColor()\n color.surface = (colorScheme == .dark ? .blue : .gray)\n color.outlineDecorative = (colorScheme == .dark ? .white : .black)\n color.onSurface = (colorScheme == .dark ? .yellow : .red)\n color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)\n color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)\n color.secondaryContainer = (colorScheme == .dark ? .green : .purple)\n color.positive = (colorScheme == .dark ? .yellow : .red)\n color.primary = (colorScheme == .dark ? .yellow : .purple)\n color.info = (colorScheme == .dark ? .yellow : .purple)\n var shape = PlacesMaterialShape()\n shape.cornerRadius = 10\n var font = PlacesMaterialFont()\n font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))\n font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))\n font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))\n font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))\n font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))\n var attribution = PlacesMaterialAttribution()\n attribution.lightModeColor = .black\n attribution.darkModeColor = .white\n theme.color = color\n theme.shape = shape\n theme.font = font\n theme.attribution = attribution\n } else {\n return PlacesMaterialTheme()\n }\n}\n \n```\n\nExample\n-------\n\n### Swift\n\n```swift\nstruct PlaceSearchDemoView: View {\n private let configuration = PlaceSearchConfiguration(\n content: [.address(), .rating(), .type(), .media(size: .large)],\n preferTruncation: true, // default is false\n theme: PlacesMaterialTheme(),\n attributionPosition: .bottom, // default is top\n selectable: true // default is false\n )\n // can also do let placeSearchViewRequest = .searchNearby(...) to configure a searchNearby request\n @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(\n SearchByTextRequest(\n textQuery: \"Googleplex\",\n placeProperties: [.all],\n locationBias: CircularCoordinateRegion(\n center: CLLocationCoordinate2D(latitude: 0, longitude: 0),\n radius: 0\n )\n )\n )\n var body: some View {\n PlaceSearchView(\n orientation: .horizontal, // default is vertical\n request: $placeSearchViewRequest,\n configuration: configuration\n )\n .onLoad { places in\n print(\"places: \\(places)\")\n }\n .onRequestError { error in\n print(\"error: \\(error)\")\n }\n .onPlaceSelected { place in\n print(\"place: \\(place)\")\n }\n }\n}\n \n```"]]