Import component

import { PlaceAutocomplete } from 'places-autocomplete-svelte'

You'll need a Google Maps API key with the Places API (New) enabled. Create or obtain your key from the Google Cloud Console.

Use component

Start using the component in your Svelte code.

<script> 
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';

// Response handler
let fullResponse = $state('')
let onResponse = (response) => {
	fullResponse = response;
};

// Error handler
let pacError = '';
let onError = (error: string) => {
	pacError = error;
};
</script>

{#if pacError}
	<p class="error">{pacError}</p>
{/if}

<PlaceAutocomplete  {onResponse} {onError} {PUBLIC_GOOGLE_MAPS_API_KEY} />

<p>Response Object: {JSON.stringify(fullResponse, null, 2)}</p>

Explanation:

• PUBLIC_GOOGLE_MAPS_API_KEY: This prop is required and should be set to your Google Maps API key. It's recommended to store this key securely as an environment variable.
• onResponse: This is a required event handler function that is called when a place is selected by the user. The selected place details are passed as an argument to this function.
• onError: This is an optional event handler function that is called if there's an error with the autocomplete request.

Autocomplete and Placeholder

This section explains how to customise the autocomplete behavior and placeholder text of the input field.

Autocomplete

The `autocomplete` property controls the browser's built-in autocomplete functionality for the input field. By default, it's set to `off` to disable browser autocomplete, providing a more consistent experience with the Google Places (New) Autocomplete suggestions. However, you can change this behavior if needed.

const options = {
	autocompete: 'on',
};
<PlaceAutocomplete 
	PUBLIC_GOOGLE_MAPS_API_KEY={PUBLIC_GOOGLE_MAPS_API_KEY} 
	{onResponse} 
	{options} 
/>

Autofocus

The `autofocus` property controls the autofocus for the input field. By default, it's set to `false` to disable focusing the component input field. However, you can change this behavior if needed.

const options = {
	autofocus: true,
};

<PlaceAutocomplete 
	PUBLIC_GOOGLE_MAPS_API_KEY={PUBLIC_GOOGLE_MAPS_API_KEY} 
	{onResponse} 
	{options} 
	/>

Placeholder

The `placeholder` property lets you customise the placeholder text displayed in the input field when it's empty.

const options = {
	placeholder="Start typing your address",
};

<PlaceAutocomplete 
	PUBLIC_GOOGLE_MAPS_API_KEY={PUBLIC_GOOGLE_MAPS_API_KEY} 
	{onResponse} 
	{options}
/>