Places Autocomplete Svelte

This Svelte component leverages the Google Maps Places Autocomplete API to provide a user-friendly way to search for and retrieve detailed address information within your SvelteKit applications.

Features:

• Seamless Integration: Easily integrate the component into your SvelteKit projects.
• Autocomplete Suggestions: Provides real-time address suggestions as the user types.
• Detailed Address Retrieval: Retrieve comprehensive address information, including street address, city, region, postal code, and country.
• Country/Region Filtering: Refine search results by specifying countries or regions.
• Customizable: Tailor the component's appearance (placeholder, language) and data retrieved (fetchFields).
• Accessible: Supports keyboard navigation for selecting suggestions.

Demo

See a live demo of the component in action: Demo

Requirements

• Google Maps API Key: Create an API key with the Places API (New) enabled. Refer to Use API Keys for detailed instructions.

Installation Svelte 5

npm i places-autocomplete-svelte

Installation Svelte 4

npm i [email protected]

Basic Usage

1. Provide your Google Maps API Key: Replace '___YOUR_API_KEY___' with your actual Google Maps API key.
2. Handle the Response: Use the onResponse callback to receive the selected place details.

<script>
import { PlaceAutocomplete } from 'places-autocomplete-svelte';

const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';

let fullResponse = $state('')
let onResponse = (response) => {
    fullResponse = response;
};
</script>

<PlaceAutocomplete  {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} />

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

Customization

• countries: Use countries property to refine search by region
• placeholder: Use the placeholder property to customize the input field's placeholder text.
• autocomplete: Use to disable the HTML <input> autocomplete attribute.
• requestParams (optional AutocompleteRequest properties ):
  • language: in which to return results. If ommited defaults to en-GB. See details
  • region: the CLDR two-character format. Defaults to GB. If the countries array is provided the coutries region overwrites the region value in requestParams.
• fetchFields: Use to control the Place response. See types for details. If omitted defaults to ['formattedAddress', 'addressComponents']

<script>
// ... other imports

/**
 * @type array optional
 */
let countries = [
    { name: 'United Kingdom', region: 'GB'},
    { name: 'United States', region: 'US' }
    // ... more countries
];
/**
 * @type string optional
 */
const placeholder = 'Search...';
/**
 * @type string optional
 * The <input> HTML autocomplete attribute.
 * if ommited defaults to 'off'
 * */ 
const autocompete = 'off';
/**
 * @type object optional
 * AutocompleteRequest properties
 */
const requestParams = {
    /**
     * @type string optional
     */
    language : 'en-GB',
    /**
     * @type string optional
     */
    region : 'GB',
}

/**
 * @type array optional
 */
const fetchFields = ['formattedAddress', 'addressComponents'];
</script>

<PlaceAutocomplete 
    {onError} 
    {onResponse} 
    {PUBLIC_GOOGLE_MAPS_API_KEY} 
    {requestParams}
    {placeholder} 
    {autocompete}
    {fetchFields}
    bind:countries
/>

Component Properties

Error Handling

The onError event will be dispatched if there is an issue with the Google Maps API or the autocomplete request.

<script>
// ... other imports

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

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

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

Contributing

Contributions are welcome! Please open an issue or submit a pull request on the GitHub repository.

License

MIT