Basic Usage

Integrating the Places Autocomplete component into your Svelte application is straightforward. This guide will walk you through the essential steps to get a functional autocomplete input up and running.

Step 1: Import the Component

First, import the PlaceAutocomplete component into your Svelte file.

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

Step 2: Handle the Response

The component communicates back to your application using the onResponse callback. This function is triggered whenever a user selects a place from the suggestions list. It receives the full place details object from the Google Places API.

let place = $state(null);

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

Step 3: Render the Component

Finally, render the component in your markup. At a minimum, you need to pass the onResponse handler.

<PlaceAutocomplete {onResponse} />

Complete Example

Here is a complete, copy-and-paste example that puts all the steps together.

<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}
/>