Component Properties

The Places Autocomplete Svelte component is highly configurable through a set of properties (props) and a nested options object. This guide provides a detailed reference for each available prop, enabling you to tailor the component to your specific needs.

Core Properties

These are the primary props passed directly to the PlaceAutocomplete component.

PUBLIC_GOOGLE_MAPS_API_KEY

Type: string

Your Google Maps API Key. Required if manual initialization via initialiseGMaps() is not used. If the loader has been initialised in a parent component, this prop becomes optional.

onResponse (Required)

Type: (response: PlaceResult) => void

Callback triggered when a place is selected from the suggestions. Receives the full PlaceResult object after fetchFields are retrieved.

onError

Type: (error: Error) => void

Callback triggered when an error occurs (API loading, network issues, fetching suggestions, etc.).

fetchFields

Type: string[]

Default: ['formattedAddress', 'addressComponents']

Place Data Fields to request from the API when a place is selected. This affects API billing. See Place Data Fields for available options and pricing.

requestParams

Type: Partial<RequestParams>

Default: { inputOffset: 0 }

Parameters for the Autocomplete API request. Allows customizing language, region (for biasing), or includedRegionCodes (for filtering). By default, it is internationally neutral. See AutocompletionRequest for all options.

options

Type: Partial<ComponentOptions>

Default: { debounce: 100 }

UI and behavior options including placeholder, debounce delay, distance display, and custom CSS classes. See details below.

Property	Type	Description	Default
PUBLIC_GOOGLE_MAPS_API_KEY	`string`	Your Google Maps API Key. Required if manual initialization via `initialiseGMaps()` is not used. If the loader has been initialised in a parent component, this prop becomes optional.
onResponse*	`(response: PlaceResult) => void`	Callback triggered when a place is selected from the suggestions. Receives the full PlaceResult object after fetchFields are retrieved.
onError	`(error: Error) => void`	Callback triggered when an error occurs (API loading, network issues, fetching suggestions, etc.).
fetchFields	`string[]`	Place Data Fields to request from the API when a place is selected. This affects API billing. See Place Data Fields for available options and pricing.	`['formattedAddress', 'addressComponents']`
requestParams	`Partial<RequestParams>`	Parameters for the Autocomplete API request. Allows customizing `language`, `region` (for biasing), or `includedRegionCodes` (for filtering). By default, it is internationally neutral. See AutocompletionRequest for all options.	`{ inputOffset: 0 }`
options	`Partial<ComponentOptions>`	UI and behavior options including placeholder, debounce delay, distance display, and custom CSS classes. See details below.	`{ debounce: 100 }`

💰 Cost Impact: fetchFields

The fetchFields prop directly affects your Google Maps API billing. Each field category (Basic, Contact, Atmosphere) has different pricing. Only request the fields you actually need to minimise costs.

Pricing Categories:

• Basic: formattedAddress, location, addressComponents (Cheaper)
• Contact: phoneNumber, website, openingHours (Moderate)
• Atmosphere: rating, reviews, photos (More expensive)

→ View detailed pricing

Options Object

The options prop accepts an object to control finer details of the component's behaviour and appearance.

placeholder

Type: string

Default: ''

Placeholder text for the input field.

debounce

Type: number

Default: 100

Delay in milliseconds before firing API request after user stops typing. Set to 0 to disable debouncing.

distance

Type: boolean

Default: false

Show distance from requestParams.origin in suggestions (if origin is provided). Mutually exclusive with show_place_type.

distance_units

Type: 'km' | 'miles'

Default: 'km'

Units for displaying distance.

label

Type: string

Default: ''

Optional label text displayed above the input field.

autofocus

Type: boolean

Default: false

Automatically focus the input field on mount.

autocomplete

Type: string

Default: 'off'

The autocomplete attribute for the input field.

classes

Type: Partial<ComponentClasses>

Default: {}

Object to override default CSS classes for various component parts. See Styling for details.

clear_input

Type: boolean

Default: true

If false, retains the formattedAddress in the input after selection. If true (default), clears the input field.

response_type

Type: 'json' | 'place'

Default: 'json'

Return format for the response. Use "json" for a JSON object, or "place" for a Google Maps Place instance (e.g., for accessing .getPhotos()).

show_place_type

Type: boolean

Default: false

Display place type icons (shopping, dining, etc.) on suggestion items. Mutually exclusive with distance.

Option	Type	Description	Default
`placeholder`	`string`	Placeholder text for the input field.	`''`
`debounce`	`number`	Delay in milliseconds before firing API request after user stops typing. Set to 0 to disable debouncing.	`100`
`distance`	`boolean`	Show distance from `requestParams.origin` in suggestions (if origin is provided). Mutually exclusive with `show_place_type`.	`false`
`distance_units`	`'km' \| 'miles'`	Units for displaying distance.	`'km'`
`label`	`string`	Optional label text displayed above the input field.	`''`
`autofocus`	`boolean`	Automatically focus the input field on mount.	`false`
`autocomplete`	`string`	The `autocomplete` attribute for the input field.	`'off'`
`classes`	`Partial<ComponentClasses>`	Object to override default CSS classes for various component parts. See Styling for details.	`{}`
`clear_input`	`boolean`	If `false`, retains the `formattedAddress` in the input after selection. If `true` (default), clears the input field.	`true`
`response_type`	`'json' \| 'place'`	Return format for the response. Use `"json"` for a JSON object, or `"place"` for a Google Maps Place instance (e.g., for accessing `.getPhotos()`).	`'json'`
`show_place_type`	`boolean`	Display place type icons (shopping, dining, etc.) on suggestion items. Mutually exclusive with `distance`.	`false`

Previous: Basic Usage
Next: Request Parameters