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) => {
        console.log(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 (autocomplete request):
  • language: Use the language property to set the language of the autocomplete results.
  • region: Use the region property to bias the results toward a particular region. If the countries array is provided the region will be used from the selected country.
• fetchFields: Use to control the Place response

<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
     * List of accepted 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} 
    bind:countries 
    {placeholder} 
    {autocompete}
    {fetchFields}/>

• region code follows the CLDR two-character format. The selected country region overwrites the region value in requestParams
• language in which to return results. If ommited defaults to the browser's language preference. See details
• requestParams list of accepted AutocompleteRequest properties
• fetchFields the types of Place data to return when requesting place details. If omitted defaults to ['formattedAddress', 'addressComponents']

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