@anil-labs/google-places-autocomplete-svelte

Svelte 5 (runes) address autocomplete component built on Google's Places API (New).

Install

npm install @anil-labs/google-places-autocomplete-svelte

Usage

<script lang="ts">
  import { PlacesAutocomplete } from '@anil-labs/google-places-autocomplete-svelte'
  import '@anil-labs/google-places-autocomplete-core/styles.css'
  import type { PlaceDetails } from '@anil-labs/google-places-autocomplete-core'

  let query = $state('')
</script>

<PlacesAutocomplete
  bind:value={query}
  apiKey="YOUR_API_KEY"
  placeholder="Search for an address…"
  onSelect={(place: PlaceDetails) => console.log(place.formattedAddress)}
  onError={(error) => console.error(error)}
/>

Full documentation: Svelte guide · getting started (Google Cloud setup) · API reference.

Props

All PlacesAutocompleteConfig fields, plus value (bindable via bind:value), placeholder, onSelect, onError. Requires Svelte 5 (runes mode). apiKey/debounceMs/etc. are read once at construction — remount to change them.

License

MIT © Er. Anil Kumar Thakur