Basic Place Autocomplete component
The Basic Place Autocomplete component of the Places UI Kit lets you add an individual UI component that returns a place ID when a user selects a place. The component is a full screen cover that provides a search bar for users to enter a query. As the user types, a list of autocomplete results will be shown below the search bar. When the user taps on a place, a place object with only place ID is returned to the developer. This component is customizable.
The component takes geographic bounds and other search parameters through the AutocompleteFilter
struct.
The response provides a Place
struct with only the placeID
field populated.
The Basic Place Autocomplete component has the following customization options: list density, and whether to include location icons. Use the AutocompleteUICustomization
struct to customize the component.
You can use the Basic Place Autocomplete component independently or in conjunction with other Google Maps Platform APIs and services.
Billing
You are billed each time the component is opened and a query is made. You won't be billed again for that session unless the session expires or a place is selected from the list.
Add the Basic Autocomplete component to your app
Set the autocomplete filter parameters (for example, the types to return, the country to limit results to, the region coordinates for results, and distance information if the users origin is set) as you would to use Place Autocomplete (New) without the Places UI Kit. See the Place Autocomplete (New) documentation for full instructions and an example of the code to create an autocomplete filter .
Once you've created your autocomplete filter, you can create a struct with your UI customizations. See customization options and instructions .
Then, create a button that will launch your customized Basic Autocomplete component.
Swift
Button ( "Search for a place" ) { showWidget . toggle () } . basicPlaceAutocomplete ( show : $ showWidget // ... )
Customize the Basic Autocomplete component
List density
You can choose to either display a two-line list or a multiline list. Use the options in AutocompleteListDensity
( .twoLine
or .multiLine
) in the AutocompleteUICustomization
class. If you don't specify the list density, the component will display a two-line list.
Location icon
You can choose whether to display a default place icon on the results list. Use the options in AutocompleteUIIcon
( .defaultIcon
or .noIcon
) in the AutocompleteUICustomization
class.
Add customizations to the Basic Autocomplete component
Use the AutocompleteUICustomization
class to customize the Basic Autocomplete component.
Swift
let uiCustomization = AutocompleteUICustomization ( listDensity : . multiLine , listItemIcon : . noIcon , )
Example
This example creates a custom Basic Autocomplete component with a button. The default icon and two-line list density have been selected. The autocomplete filter is set to find accounting-related Places in and near Las Vegas.
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 ) } } } }
