A minimal port of the Google Places Autocomplete API as a Svelte component.
Inspired largely by beyonk-adventures/svelte-googlemaps.
If you restrict the Google API key you use for this (recommended), ensure you allow at least the following two APIs, since this component needs them in order to fully function:
<script>
const options = {
fields: ['address_components', 'geometry'],
types: ['(cities)']
}
const placeholder = 'Destination city'
let locationName = localStorage.get('locationName') || ''
</script>
<GooglePlacesAutocomplete apiKey={googlePlacesApiKey} class="form-control"
on:place_changed={onPlaceChanged} {options}
on:ready={onReady} {placeholder}
value={locationName}
required
pattern="[a-zA-Z ]+" />
Your Google Places API Key.
Any HTML class string to apply to the input element.
The options
that you want to pass to the Google Places Autocomplete code.
Any placeholder text to use. Defaults to an automatically-localized placedholder string.
The text to show in the input.
WARNING: You cannot bind to this. To receive data out of this component,
listen for the place_changed
event.
Require a value to be entered.
Specifies a regular expression that is used for validation upon form submission.
When a location is selected,
Fired when the component has initialized, the Google Places API has been loaded, and this component is therefore ready for user interaction.
(Mostly) automated tests are available:
make test
localhost:8086
in a browserEnter
The tests are defined in test/tests.js
. See that file for examples.
$ npm install @silintl/svelte-google-places-autocomplete
Please use the included prettier config for formatting. You can also run make format
to format all files with prettier.