Basic example

This example demonstrates the basic integration of the Places (New) Autocomplete Svelte component, showing how to display the component and retrieve the selected place details.

powered by

Code

Copy and paste the following code into your Svelte application and replace ___YOUR_API_KEY___ with your actual API key to start using the Places Autocomplete Svelte component.

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