Google Places Autocomplete for Svelte

https://places-autocomplete-demo.pages.dev/
Admin
A flexible, accessible, and secure Svelte component that brings the power of Google Places search to...
Tokens:8,232
Snippets:57
Trust Score:7.2
Update:11 months ago
Show doc for...
Tokens:
Raw
### Complete Places Autocomplete Svelte Example

Source: https://places-autocomplete-demo.pages.dev/component/basic-usage

A full Svelte component example integrating PlaceAutocomplete. It includes importing the component, setting up API keys securely, and defining `onResponse` and `onError` callbacks for place selection and errors. The component is rendered with these configurations.

```svelte
<script>
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import type { PlaceResult } from 'places-autocomplete-svelte/interfaces'; 

// Get API Key securely (e.g., from environment variables)
const PUBLIC_GOOGLE_MAPS_API_KEY = import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY;

// --- Event Handlers ---
const onResponse = (response: PlaceResult) => {
	console.log('Place Selected:', response);
};

const onError = (error: string) => {
	console.error('Places Autocomplete Error:', error);
};
</script>


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

```

--------------------------------

### Import PlaceAutocomplete Component in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/basic-usage

Imports the PlaceAutocomplete component from the 'places-autocomplete-svelte' library. This is the first step to using the component in your Svelte application. Ensure the library is installed.

```javascript
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
```

--------------------------------

### Customize Component Options for Places Autocomplete

Source: https://places-autocomplete-demo.pages.dev/examples/advanced

Configures the UI and behavior of the Places Autocomplete component using the `options` prop. This includes setting a placeholder text, enabling distance calculation with specified units, and applying custom CSS classes to highlighted suggestions.

```javascript
const options = {
  "placeholder": "Search for a location in Great Britain...",
  "distance": true,
  "distance_units": "km",
  "clear_input": true,
  "classes": {
    "li_current": "bg-green-500"
  }
};
```

--------------------------------

### Full Svelte Component for Places Autocomplete

Source: https://places-autocomplete-demo.pages.dev/examples/advanced

Integrates the Places Autocomplete component within a Svelte application, including necessary imports, Google Maps API initialization, and event handlers for response and error callbacks. It demonstrates how to pass configured options, request parameters, and fetch fields to the component.

```svelte
<script>
import { browser } from '$app/environment';
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import { initialiseGMaps, setGMapsContext, importLibrary } from 'places-autocomplete-svelte/gmaps';
import type {PlaceResult,ComponentOptions } from 'places-autocomplete-svelte/interfaces';

let { data } = $props();
const PUBLIC_GOOGLE_MAPS_API_KEY = data?.PUBLIC_GOOGLE_MAPS_API_KEY;

// 1. Set the context for Google Maps. This should be done in the script's top-level scope.
setGMapsContext();

// 2. If we are in the browser, trigger the asynchronous loading process.
if (browser) {
	initialiseGMaps({
		key: PUBLIC_GOOGLE_MAPS_API_KEY,
		v: 'weekly' 
	}).catch((error: any) => {
		// ... handle error (already logged in initialiseGMaps)
	});
}

// --- Event Handlers ---
const onResponse = (response: PlaceResult) => {
	console.log('Place Selected:', response);
};

const onError = (error: string) => {
	console.error('Places Autocomplete Error:', error);
};

// --- Component Options ---
// See Properties for full list
const options: Partial<ComponentOptions> = {
	distance: true,
	distance_units: 'km',
	clear_input: true,
	placeholder: 'Start typing your address',
	classes: {
		li_current: 'bg-green-500',
	}
};

// --- Request Parameters ---
// See Request Parameters for full list
const requestParams = {
	region : 'GB',
	language : 'en-GB',		 
};

// --- Fetch Fields ---
// Specify which fields to fetch from the Places API
const fetchFields = ['formattedAddress', 'addressComponents'];

</script>

<PlaceAutocomplete {options} {requestParams} {fetchFields} {onResponse} {onError} />

```

--------------------------------

### Configure Request Parameters for Places Autocomplete

Source: https://places-autocomplete-demo.pages.dev/examples/advanced

Defines parameters to modify the underlying Autocomplete API request, such as language, region, and location bias. These settings help to restrict results and improve relevance for the user's location.

```javascript
const requestParams = {
  "language": "en-gb",
  "region": "GB",
  "includedRegionCodes": [
    "GB"
  ],
  "origin": {
    "lat": 53.7653865,
    "lng": -3.0181503
  }
};
```

--------------------------------

### Integrate Places Autocomplete Svelte Component

Source: https://places-autocomplete-demo.pages.dev/examples/basic

Implements the PlaceAutocomplete component in a Svelte application. Imports the component and TypeScript interfaces, retrieves the Google Maps API key from environment variables, and defines onResponse and onError event handlers. The component is instantiated with the API key and handler functions as props. Requires the places-autocomplete-svelte package and a valid Google Maps API key with Places API enabled.

```svelte
<script>
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import type { PlaceResult } from 'places-autocomplete-svelte/interfaces'; 

// Get API Key securely (e.g., from environment variables)
const PUBLIC_GOOGLE_MAPS_API_KEY = import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY;

// --- Event Handlers ---
const onResponse = (response: PlaceResult) => {
    console.log('Place Selected:', response);
};

const onError = (error: string) => {
    console.error('Places Autocomplete Error:', error);
};
</script>


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

--------------------------------

### Specify Data Fields for Places Autocomplete API

Source: https://places-autocomplete-demo.pages.dev/examples/advanced

Uses `fetchFields` to explicitly request specific data fields from the Google Maps Places API. This is a recommended practice for optimizing API calls by retrieving only necessary information, thus managing costs and enhancing performance.

```javascript
const fetchFields = [
  "formattedAddress",
  "addressComponents"
];
```

--------------------------------

### Import Places Autocomplete in Svelte Script

Source: https://places-autocomplete-demo.pages.dev/index

This snippet demonstrates importing the Places Autocomplete component and a type from the places-autocomplete-svelte package in a Svelte application's script tag. It assumes the package is installed and requires a Google Maps API key for functionality. The code is partial and includes a placeholder for secure API key retrieval.

```svelte
<script>
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import type { PlaceResult } from 'places-autocomplete-svelte/interfaces';

// Get API Key securely (e.g., from environment variables)
const PUBLIC_GOOGLE_MAPS_API_KEY = import....
</script>
```

--------------------------------

### Svelte: Programmatically Control Places Autocomplete

Source: https://places-autocomplete-demo.pages.dev/component/component-methods

This Svelte code snippet shows how to bind to the `PlaceAutocomplete` component instance using `bind:this`. It then demonstrates calling imperative methods like `clear()`, `focus()`, and `getRequestParams()` from button click handlers to programmatically interact with the autocomplete input and its state. Requires the 'places-autocomplete-svelte' library.

```svelte
<script lang="ts">
    import { PlaceAutocomplete } from 'places-autocomplete-svelte';
    import type { PlaceResult, ComponentOptions, RequestParams } from 'places-autocomplete-svelte/interfaces';

    let autocompleteComponent: PlaceAutocomplete | undefined = $state(undefined);

    // --- Event Handlers ---
    const handleResponse = (response: PlaceResult) => {
        console.log('Place Selected:', response);
    };

    const handleError = (error: string) => {
        console.error('Places Autocomplete Error:', error);
    };
</script>

<PlaceAutocomplete
    bind:this={autocompleteComponent}
    {PUBLIC_GOOGLE_MAPS_API_KEY}
    {onError}
	onResponse
/>

<div class="controls">
    <button onclick={() => autocompleteComponent?.clear()}>Clear</button>
    <button onclick={() => autocompleteComponent?.focus()}>Focus Input</button>
    <button onclick={() => console.log(JSON.stringify(autocompleteComponent?.getRequestParams(), null, 2))}>
        Get Request Params
    </button>
</div>

```

--------------------------------

### Handle Place Selection Response in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/basic-usage

Defines and uses the `onResponse` callback function to handle the Google Places API response when a user selects a place. The function receives the full place details object. It utilizes Svelte's state management.

```javascript
let place = $state(null);

const onResponse = (response) => {
  // The Google Places API response object
  place = response;
};
```

--------------------------------

### Reactive Places Autocomplete in Svelte

Source: https://places-autocomplete-demo.pages.dev/examples/reactive-parameters

Implements a Places Autocomplete component in Svelte that reacts to changes in region and language parameters. Uses reactive state with `$state`, dropdown bindings, and the `{#key}` block to force component reinitialization. Requires a Google Maps API key.

```svelte
<script lang="ts">
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
// Google Maps API key
const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';

// Error handler function
let onError = (error: string) => {
	console.error('Places Autocomplete Error:', error);
};
// Response handler function
let onResponse = (response: any) => {
	console.log('Place Selected:', response);
};

 // List of accepted AutocompleteRequest properties
let requestParams = $state({
	language: 'en-gb',
	region: 'GB'
});	

// Unique key
let unique = $state({}); // every {} is unique, {} === {} evaluates to false
let resetComponent = () => {
	unique = {};
};

// Region options
const regions = $state([
	{ value: 'GB', label: 'United Kingdom' },
	{ value: 'GR', label: 'Geece' },
	{ value: 'IT', label: 'Italy' }
]);
let selectedRegion = $state('GB');

// Language options
const languages = $state([
	{ value: 'en-gb', label: 'English (United Kingdom)' },
	{ value: 'el', label: 'Geeek' },
	{ value: 'it-it', label: 'Italian (Italy)' },
	{ value: 'ru', label: 'Russian' }
]);
let selectedLanguage = $state('en-gb');

// Handle change
let handleChange = (e: Event) => {
	const target = e.target as HTMLSelectElement;
	const value = target.value || '';
	const propTarget = target.dataset.value || '';
	switch (propTarget) {
		case 'region':
			requestParams.region = value;
			break;
		case 'language':
			requestParams.language =  value;
			break;
		default:
			break;
	}
	resetComponent();
};
</script>

<label for="region">Region</label>
<select 
	id="region" 
	name="region" 
	bind:value={selectedRegion} 
	onchange={handleChange} 
	data-value="region">
{#each regions as r}
	<option value={r.value}>
		{r.label}
	</option>
{/each}
</select>
		

<label for="language">Language</label>
<select
	id="language"
	name="language"
	bind:value={selectedLanguage}
	onchange={handleChange}
	data-value="language">
	{#each languages as r}
		<option value={r.value}>
			{r.label}
		</option>
	{/each}
</select>


{#key unique}
	<PlaceAutocomplete 
		{onError} 
		{onResponse} 
		requestParams={$state.snapshot(requestParams)}
		{PUBLIC_GOOGLE_MAPS_API_KEY} 
	/>
{/key}		
```

--------------------------------

### Svelte Places Autocomplete with Google Maps Integration

Source: https://places-autocomplete-demo.pages.dev/examples/map-integration

This Svelte component integrates Google Places Autocomplete with Google Maps. It dynamically loads the Google Maps JavaScript API and required libraries, initializes a map, and updates the map's center and marker position based on the selected place. Requires a Google Maps API key and map ID. Dependencies include 'places-autocomplete-svelte' and '@types/google.maps'.

```svelte
<script>
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import { initialiseGMaps, setGMapsContext, importLibrary } from 'places-autocomplete-svelte/gmaps';
import type {PlaceResult,ComponentOptions } from 'places-autocomplete-svelte/interfaces';

let { data } = $props();
const PUBLIC_GOOGLE_MAPS_API_KEY = data?.PUBLIC_GOOGLE_MAPS_API_KEY;
const fetchFields = ['formattedAddress', 'addressComponents', 'location'];

// 1. Set the context for Google Maps. This should be done in the script's top-level scope.
setGMapsContext();

// 2. If we are in the browser, trigger the asynchronous loading process.
if (browser) {
	initialiseGMaps({
		key: PUBLIC_GOOGLE_MAPS_API_KEY,
		v: 'weekly' 
	}).catch((error: any) => {
		// ... handle error (already logged in initialiseGMaps)
	});
}

// 3. Define the types for the libraries you will load.
type LoadedLibraries = {
	Map: typeof google.maps.Map;
	AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement;
};

/**
 * Install the Type Definitions for Google Maps
 * npm install --save-dev @types/google.maps
 */
let mapElement: HTMLElement;
let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let loadedLibs: LoadedLibraries | undefined;


// Error handling
const onError = (error: string) => {
	console.error('Places Autocomplete Error:', error);
};

// Response handler
const onResponse = (response: PlaceResult) => {
	if (response.location) {
		map.setCenter(response.location);
		map.setZoom(15);
		if (marker) {
			marker.position = response.location;
		} else {
			if (loadedLibs) {
				marker = new loadedLibs.AdvancedMarkerElement({
					position: response.location,
					map: map,
					title: response.formattedAddress || 'Selected Location'
				});
			}
		}
	}
};

/**
 * 4. Load the Google Maps JavaScript API and the required libraries on component mount.
 */
onMount(async () => {

	const { Map } = await importLibrary('maps');
	const { AdvancedMarkerElement } = await importLibrary('marker');
	loadedLibs = { Map, AdvancedMarkerElement };

	const mapEl = document.getElementById('map');
	// Check if the element was found before using it
	if (mapEl && loadedLibs.Map) {
		mapElement = mapEl; // This is now safe
		map = new loadedLibs.Map(mapElement, {
			center: { lat: 51.5072, lng: -0.1276 }, // Default to London
			zoom: 10,
			mapId: 'your-map-id'
		});
	} else {
		// It's good practice to log an error if the element is missing
		console.error('Failed to find the map element with ID "map"');
	}
});

</script>

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

<div id="map" class="h-96 w-full rounded-md"></div>

```

--------------------------------

### Render PlaceAutocomplete Component in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/basic-usage

Renders the PlaceAutocomplete component within your Svelte markup. The `onResponse` handler is a required prop to receive place selection data. Other optional props can also be passed.

```html
<PlaceAutocomplete {onResponse} />
```

--------------------------------

### Svelte Places Autocomplete Component Integration

Source: https://places-autocomplete-demo.pages.dev/component/styling

This Svelte component utilizes the 'places-autocomplete-svelte' library to provide Google Places Autocomplete functionality. It requires a Google Maps API key and allows customization through the 'options' object. The component accepts 'onError' and 'onResponse' event handlers.

```svelte
<script lang="ts">
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
// Google Maps API key
const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';

const options = {
	classes : {
		section: '',
		container: 'relative z-10 transform rounded-xl mt-4',
		icon_container: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
		icon: '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>',
		input:
			'border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm',
		kbd_container: 'absolute inset-y-0 right-0 flex py-1.5 pr-1.5',
		kbd_escape:
			'inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1',
		kbd_up:
			'inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6',
		kbd_down:
			'inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6',
		kbd_active: 'bg-indigo-500 text-white',
		ul: 'absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm divide-y divide-gray-100',
		li: 'z-50 cursor-default select-none py-2 px-2 lg:px-4 text-gray-900 hover:bg-indigo-500 hover:text-white',
		li_current: 'bg-indigo-500',
		li_a: 'block w-full flex justify-between',
		li_a_current: 'text-white',
		li_div_container: 'flex min-w-0 gap-x-4',
		li_div_one: 'min-w-0 flex-auto',
		li_div_one_p: 'text-sm/6 ',
		li_div_two: 'shrink-0 flex flex-col items-end min-w-16',
		li_div_two_p: 'mt-1 text-xs/5',
		highlight: 'font-bold'
	}
}
</script>

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

```

--------------------------------

### Svelte Checkout Form with Places Autocomplete

Source: https://places-autocomplete-demo.pages.dev/examples/checkout-form

This component uses the places-autocomplete-svelte library to fetch and populate address fields in a form. It depends on a Google Maps API key and reactive state management with $state. Inputs include API key and user-typed address; outputs are populated form fields like street, city, postal code, and country. Limitations include reliance on Google's address components and potential localization issues.

```svelte
<script lang="ts">
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import type { PlaceResult, ComponentOptions } from 'places-autocomplete-svelte/interfaces';

let { data } = $props();
const PUBLIC_GOOGLE_MAPS_API_KEY = data?.PUBLIC_GOOGLE_MAPS_API_KEY;

// --- Form State ---
// Use $state to create a reactive object for our form fields
let form = $state({
	street_number: '',
	route: '', // Street name
	locality: '', // City
	administrative_area_level_1: '', // State/Province
	country: '',
	postal_code: ''
});

// --- Component State ---
let placesError = $state('');
let fullResponse: PlaceResult | null = $state(null);

// --- Component Configuration ---
const fetchFields = ['addressComponents', 'formattedAddress'];

// Set clear_input: false to keep the address visible after selection.
const options: ComponentOptions = {
	placeholder: 'Start typing your address...',
	clear_input: false
};

// --- Event Handlers ---
const onError = (error: string) => (placesError = error);

const onResponse = (response: PlaceResult) => {
	fullResponse = response;
	// Reset form fields before populating
	for (const key in form) {
		form[key as keyof typeof form] = '';
	}

	// Helper function to find a specific address component
	const getAddressComponent = (type: string) =>
		response.addressComponents?.find((c) => c.types.includes(type))?.longText || '';

	// Populate the form state with values from the response
	form.street_number = getAddressComponent('street_number');
	form.route = getAddressComponent('route');
	form.locality = getAddressComponent('postal_town') || getAddressComponent('locality');
	form.administrative_area_level_1 = getAddressComponent('administrative_area_level_1');
	form.country = getAddressComponent('country');
	form.postal_code = getAddressComponent('postal_code');
};
</script>


{#if placesError}
	<div class="mt-4 rounded-md bg-red-100 p-4 text-red-800">
		<p class="font-semibold text-red-800">Error</p>
		<p>{placesError}</p>
	</div>
{/if}
<PlaceAutocomplete
    {PUBLIC_GOOGLE_MAPS_API_KEY}
    {options}
    {onError}
	{onResponse}
/>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<div class="mx-auto w-full max-w-md">
		<label for="address1" class="block text-sm font-medium text-slate-200">Address:</label>
		<input
			type="text"
			id="address1"
			class="mt-2 block w-full rounded-md border border-gray-300 bg-slate-700 p-2 text-slate-300"
			bind:value={obj.street_number}
		/>
	</div>
	<div class="mx-auto w-full max-w-md">
		<label for="city" class="block text-sm font-medium text-slate-200">City:</label>
		<input
			id="city"
			class="mt-2 block w-full rounded-md border border-gray-300 bg-slate-700 p-2 text-slate-300"
			bind:value={obj.locality}
		/>
	</div>
	<div class="mx-auto w-full max-w-md">
		<label for="postcode" class="block text-sm font-medium text-slate-200">Postal Code:</label>
		<input
			type="text"
			id="postcode"
			class="mt-2 block w-full rounded-md border border-gray-300 bg-slate-700 p-2 text-slate-300"
			bind:value={obj.postal_code}
		/>
	</div>
	<div class="mx-auto w-full max-w-md">
		<label for="country" class="block text-sm font-medium text-slate-200">Country:</label>
		<input
			type="text"
			id="country"
			class="mt-2 block w-full rounded-md border border-gray-300 bg-slate-700 p-2 text-slate-300"
			bind:value={obj.country}
		/>
	</div>
</div>


```

--------------------------------

### Configure AutocompleteRequest in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters

Defines the basic structure of the `requestParams` object for the Places Autocomplete component. This object corresponds to the AutocompleteRequest interface in the Google Maps JavaScript API.

```javascript
const requestParams = {
	region: 'GB',
	language: 'en-GB'
}
```

--------------------------------

### Set language parameter in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters

Specifies the language for returned suggestions. If omitted, defaults to the browser's language setting.

```javascript
const requestParams = {
	language: 'en-GB'
}
```

--------------------------------

### Configure Places Autocomplete Localization Parameters in JavaScript

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters-playground

Defines the requestParams object for the Places Autocomplete component. Sets localization parameters including language (British English) and region (Great Britain) to tailor search results. This configuration affects result language, formatting, and geographic ranking.

```javascript
{
  "language": "en-gb",
  "region": "GB"
}
```

--------------------------------

### Filter by place types in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters

Limits results to specific categories by providing an array of place types. Useful for targeting specific kinds of places like restaurants or airports.

```javascript
const requestParams = {
	includedPrimaryTypes: ['restaurant', 'bar', 'cafe']
}
```

--------------------------------

### Limit to specific countries in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters

Strictly limits results to a set of countries using an array of two-character CLDR codes. Unlike the `region` parameter, this is a hard filter.

```javascript
const requestParams = {
	includedRegionCodes: ['GB', 'DE', 'IT']
}
```

--------------------------------

### Bias results by location in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters

Biases results towards a specific geographical area to prioritize nearby results without completely excluding others. Accepts a LocationBias object.

```javascript
const requestParams = {
	locationBias: {
		"lat":53.30133845118124,
		"lng":-1.8017578125
	}
}
```

--------------------------------

### Set region parameter in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters

Biases the autocomplete results to a specific country using the two-character CLDR code. This is a bias, not a strict restriction.

```javascript
const requestParams = {
	region: 'GB'
}
```

--------------------------------

### Restrict results by location in Svelte

Source: https://places-autocomplete-demo.pages.dev/component/request-parameters

Strictly confines search results to a specific geographical area. Results outside this area will not be shown. Accepts a LocationRestriction object.

```javascript
const requestParams = {
	locationRestriction: {
		"north":54.09994059671522,
		"east":-0.7812994437747967,
		"south":52.844531447174056,
		"west":-3.6816900687747967
	}
}
```

--------------------------------

### Configure Places Autocomplete to Retain Input (Svelte)

Source: https://places-autocomplete-demo.pages.dev/examples/retain-input-value

This Svelte code snippet configures the Places Autocomplete component to keep the selected address in the input field after selection. It overrides the default behavior by setting `clear_input` to `false` within the `options` object. This is useful for forms where the user needs to see the selected value.

```javascript
const options = {
  clear_input: false
};
```

```svelte
<script>
// ...

// Control component appearance and behavior
const options: Partial<ComponentOptions> = $state({
	clear_input: false, // <-- Retain input value after selection
});

</script>

<PlaceAutocomplete
    {PUBLIC_GOOGLE_MAPS_API_KEY}
    {options}
    {onResponse}
    {onError}
/>
```
Tokens:
Raw