Places (New) Autocomplete Svelte

A flexible and customizable Svelte component leveraging the Google Maps Places (New) Autocomplete API to provide a user-friendly way to search for and retrieve detailed address information within your SvelteKit applications.

This component handles API loading, session tokens, fetching suggestions, and requesting place details, allowing you to focus on integrating the results into your application. Includes features like debounced input, highlighting of matched suggestions, extensive customization via CSS classes, and full TypeScript support.

Requirements

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

Installation

Install the package using npm:

npm i places-autocomplete-svelte

Then, get your Google Maps API Key and start using the component in your Svelte code (see the Basic Usage guide for details).

Features

• Integrates with the modern Google Places (New) Autocomplete API.
• Automatically handles session tokens for cost management per Google's guidelines.
• Debounced Input: Limits API calls while the user is typing (configurable).
• Suggestion Highlighting: Automatically highlights the portion of text matching the user's input in the suggestions list.
• Customizable Styling: Easily override default styles or apply your own using the options.classes prop. Built with Tailwind CSS utility classes by default.
• TypeScript Support: Fully written in TypeScript with included type definitions.
• Event Handling: Provides onResponse and onError callbacks.
• Configurable: Control API parameters (requestParams), requested data fields (fetchFields), and component behavior/appearance (options).
• Prop Validation: Sensible defaults and validation for configuration props.

JavaScript Integration

The PAC Service now offers a simple JavaScript integration. Add powerful address autocompletion to your website by including a single script tag and setting up a callback function to receive the results. For detailed integration instructions and to get started, please visit PAC Service website.