A minimal port of the Google Places Autocomplete API as a Svelte component.
Inspired largely by beyonk-adventures/svelte-googlemaps.
<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} />
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.
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:
- Run
make test
- Open
localhost:8086
in a browser - Paste in your Google Places API Key and hit
Enter
- Follow any instructions shown (e.g. "Please click on the first suggestion")
The tests are defined in test/tests.js
. See that file for examples.