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.

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

See a live demo of the component in action: Demo

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

npm i places-autocomplete-svelte

npm i places-autocomplete-svelte@1.0.1

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>

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

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}

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

MIT