החיוב מתבצע בכל פעם שמשנים את ערך הקישור SearchByTextRequest() או PlaceSearchViewRequest().
הוספת חיפוש מקומות לאפליקציה
מוסיפים את הווידג'ט של חיפוש מקומות באמצעות הסמל PlaceSearchView class.
Swift
PlaceSearchView(orientation:.horizontal,// default is verticalrequest:$placeSearchViewRequest,configuration:configuration)
כדי שהאפליקציה תטען תוצאה של חיפוש טקסט או חיפוש בקרבת מקום, צריך לעדכן את הערך של PlaceSearchViewRequest.
Swift
// 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)))
אפשר גם לקבל קריאות חוזרות (callback) כשהרכיב נטען, כשבוחרים מקום או כשיש שגיאה בטעינת הרכיב.
privateletconfiguration=PlaceSearchConfiguration(content:[.address,.rating,.media(size:.large)],preferTruncation:true,// default is falsetheme:PlacesMaterialTheme(),attributionPosition:.bottom,// default is topselectable:true// default is false)
התאמה אישית של הכיוון
כיוון ברירת המחדל הוא לאורך. אפשר לציין כיוון אופקי ב-PlaceSearchView.
Swift
PlaceSearchView(orientation:.horizontal,// default is verticalrequest:$placeSearchViewRequest,configuration:configuration)
התאמה אישית של העיצוב
אתם יכולים לציין עיצוב שיבטל את כל מאפייני הסגנון שמוגדרים כברירת מחדל. ברירת המחדל היא PlacesMaterialTheme.
ערכת ה-UI של Places מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל-.dark ול-attribution.darkModeColor בעיצוב המותאם אישית.
דוגמאות
הוספת הרכיב Place Search
Swift
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)")}}}
התאמה אישית של העיצוב
ערכת ה-UI של Places מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל.dark ולattribution.darkModeColor לעיצוב המותאם אישית.
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-09-10 (שעון 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\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 [`SearchByTextRequest`](/maps/documentation/places/ios-sdk/reference/swift/Structs/SearchByTextRequest) or a [`SearchNearbyRequest`](/maps/documentation/places/ios-sdk/reference/swift/Structs/SearchNearbyRequest).\n\nBilling\n\n\nYou are billed each time the `SearchByTextRequest()` or `PlaceSearchViewRequest()` binding value is changed.\n\nAdd Place Search to your app **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\nSwift \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\nSwift \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\nSwift \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\nCustomize content You 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\nSwift \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\nSwift \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\nCustomize orientation\n\n\nThe default orientation is vertical. You can specify a horizontal orientation in `PlaceSearchView`. \n\nSwift \n\n```swift\nPlaceSearchView(\n orientation: .horizontal, // default is vertical\n request: $placeSearchViewRequest,\n configuration: configuration\n)\n \n```\n\nCustomize 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).\n\n\nSee the [Custom styling](/maps/documentation/places/ios-sdk/places-ui-kit-custom-styling) section for more information on theming.\n\n\nThe Places UI Kit provides a dark theme by default, so you may need to customize both dark and light themes. To customize the dark theme, add values for `.dark` and `attribution.darkModeColor` to your [custom theme](/maps/documentation/places/ios-sdk/place-search-ui-kit#customize-the-theme_1).\n\nExamples\n\nAdd the Place Search component \n\nSwift \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```\n\nCustomize the theme\n\n\nThe Places UI Kit provides a dark theme by default, so you may need to customize both dark and light themes. To customize the dark theme, add values for `.dark` and `attribution.darkModeColor` to your custom theme. \n\nSwift \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```"]]