The Places (New) Autocompelte Svelte component offers a range of properties for customizing its behavior, appearance, and data handling. This page provides a detailed overview of each property.
Configure the behavior and appearance of the Places Autocomplete component using the following properties:
PUBLIC_GOOGLE_MAPS_API_KEY *Type: string
Your Google Maps Places API Key.
onResponse *Type: callback
Callback function that receives the selected place details.
onError Type: callback
Callback function is called when an error occurs.
requestParams Type: object | Default: {}
Object for additional request parameters (e.g., types, bounds). See AutocompleteRequest.
fetchFields Type: array | Default: ['formattedAddress', 'addressComponents']
Array of place data fields to return. See Supported Fields documentation for a comprehensive list of available fields. Note that the Places Autocomplete service does not support the following fields, even if they are available in the Place Details API: geometry, icon, name, permanentlyClosed, photo, placeId, url, utcOffset, vicinity, openingHours,icon, and name. If you need these fields, you must make a separate call to the Place Details API using the returned `place_id`.
options Type: object | Default: See default values below.
Options for customizing the components behavior and appearance.
Configure the behavior and appearance of the Places Autocomplete component using the following properties:
autofocus Type: boolean | Default: false
If true, the input field will be focused automatically when the component mounts.
placeholder *Type: string | Default: Start typing...
Placeholder text for the input field.
autocomplete Type: string | Default: off
HTML autocomplete attribute for the input field. Set to "off" to disable browser autocomplete.
distance Type: boolean | Default: {}
If true, and if an origin is specified in requestParams, displays the distance to each suggestion. The distance is calculated as a geodesic in meters.
distance_units Type: string | Default: km
Specified the distance units. "km" or "miles". Only used if distance is set to true.
classes Type: object
Object to override default Tailwind CSS classes. See Styling