The Ultimate Google Places Autocomplete for Svelte

A flexible, accessible, and secure Svelte component that brings the power of Google Places search to your application in minutes.

Google Maps Platform Awards 2025 Winner

Google Developer Program | Google for Developers

Get Started View on GitHub

Live Demo

See the component in action with default settings—start typing to experience it yourself.

Quick Start in 3 Steps

1

Get an API Key

Enable the Places API in the Google Cloud Console and create an API key. Learn how.
2
Install the Package
```
npm i places-autocomplete-svelte
```

Import and Use

Import the component and add it to your page. Refer to the Basic Usage guide for complete examples.

<script>
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import type { PlaceResult } from 'places-autocomplete-svelte/interfaces'; 

// Get API Key securely (e.g., from environment variables)
const PUBLIC_GOOGLE_MAPS_API_KEY = import....

Powerful Features Out of the Box

Fully Accessible

Follows WAI-ARIA patterns with full keyboard navigation.

Secure

Safely renders suggestions to protect against XSS attacks.

Cost-Effective

Automatically handles session tokens to manage API costs.

Debounced Input

Limits API calls while the user is typing to save requests.

Customisable

Easily override styles or provide your own using props.

TypeScript Ready

Written entirely in TypeScript with comprehensive type definitions.

Need a Framework-Agnostic Solution?

The core logic of this component is also available as a standalone JavaScript library—places-autocomplete-js. It delivers the same robust features for any web application, regardless of your chosen framework.

View on GitHub Live Demo on CodePen

Next: Basic Usage