Places (New) Autocomplete Svelte

A flexible and customizable Svelte component leveraging the Google Maps Places Autocomplete API (New) 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.

Also Available: Standalone JavaScript Library (places-autocomplete-js)

If you're working on a non-SvelteKit project or need a framework-agnostic solution, places-autocomplete-js offers the same robust features that provides integration for any web application.

It handles API loading, session tokens for cost-effective usage, fetching suggestions with debouncing, keyboard navigation, highlighting matched text, and requesting place details. This allows you to easily add rich address search to projects built with other frameworks or plain JavaScript.

Next: Properties