-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor README.md for improved code formatting, clarify requestParam…
…s and fetchFields descriptions, and enhance error handling instructions
- Loading branch information
1 parent
b333cee
commit 74a1be5
Showing
1 changed file
with
47 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -42,15 +42,14 @@ npm i [email protected] | |
|
|
||
| ```svelte | ||
| <script> | ||
| import { PlaceAutocomplete } from 'places-autocomplete-svelte'; | ||
| import { PlaceAutocomplete } from 'places-autocomplete-svelte'; | ||
| const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___'; | ||
| const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___'; | ||
| let fullResponse = $state('') | ||
| let onResponse = (response) => { | ||
| console.log(response) | ||
| fullResponse = response; | ||
| }; | ||
| let fullResponse = $state('') | ||
| let onResponse = (response) => { | ||
| fullResponse = response; | ||
| }; | ||
| </script> | ||
| <PlaceAutocomplete {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} /> | ||
|
|
@@ -65,52 +64,52 @@ npm i [email protected] | |
| - `countries`: Use countries property to refine search by region | ||
| - `placeholder`: Use the placeholder property to customize the input field's placeholder text. | ||
| - `autocomplete`: Use to disable the HTML `<input>` autocomplete attribute. | ||
| - `requestParams` (autocomplete request): | ||
| - `language`: Use the language property to set the language of the autocomplete results. | ||
| - `region`: Use the region property to bias the results toward a particular region. If the countries array is provided the region will be used from the selected country. | ||
| - `fetchFields`: Use to control the Place response | ||
| - `requestParams` (optional [AutocompleteRequest properties](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest) ): | ||
| - `language`: in which to return results. If ommited defaults to `en-GB`. [See details](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.language) | ||
| - `region`: the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). Defaults to `GB`. If the countries array is provided the coutries region overwrites the `region` value in `requestParams`. | ||
| - `fetchFields`: Use to control the Place response. See [types](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) for details. If omitted defaults to `['formattedAddress', 'addressComponents']` | ||
|
|
||
| ```svelte | ||
| <script> | ||
| // ... other imports | ||
| /** | ||
| * @type array optional | ||
| */ | ||
| let countries = [ | ||
| { name: 'United Kingdom', region: 'GB'}, | ||
| { name: 'United States', region: 'US' } | ||
| // ... more countries | ||
| ]; | ||
| // ... other imports | ||
| /** | ||
| * @type array optional | ||
| */ | ||
| let countries = [ | ||
| { name: 'United Kingdom', region: 'GB'}, | ||
| { name: 'United States', region: 'US' } | ||
| // ... more countries | ||
| ]; | ||
| /** | ||
| * @type string optional | ||
| */ | ||
| const placeholder = 'Search...'; | ||
| /** | ||
| * @type string optional | ||
| * The <input> HTML autocomplete attribute. | ||
| * if ommited defaults to 'off' | ||
| * */ | ||
| const autocompete = 'off'; | ||
| /** | ||
| * @type object optional | ||
| * AutocompleteRequest properties | ||
| */ | ||
| const requestParams = { | ||
| /** | ||
| * @type string optional | ||
| */ | ||
| const placeholder = 'Search...'; | ||
| language : 'en-GB', | ||
| /** | ||
| * @type string optional | ||
| * The <input> HTML autocomplete attribute. | ||
| * if ommited defaults to 'off' | ||
| * */ | ||
| const autocompete = 'off'; | ||
| /** | ||
| * @type object optional | ||
| * List of accepted AutocompleteRequest properties | ||
| */ | ||
| const requestParams = { | ||
| /** | ||
| * @type string optional | ||
| */ | ||
| language : 'en-GB', | ||
| /** | ||
| * @type string optional | ||
| */ | ||
| region : 'GB', | ||
| } | ||
| region : 'GB', | ||
| } | ||
| /** | ||
| * @type array optional | ||
| */ | ||
| const fetchFields = ['formattedAddress', 'addressComponents']; | ||
| /** | ||
| * @type array optional | ||
| */ | ||
| const fetchFields = ['formattedAddress', 'addressComponents']; | ||
| </script> | ||
| <PlaceAutocomplete | ||
|
|
@@ -124,24 +123,6 @@ npm i [email protected] | |
| ``` | ||
|
|
||
| - `region` code follows the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). The selected country region overwrites the `region` value in `requestParams` | ||
| - `language` in which to return results. If ommited defaults to the browser's language preference. [See details](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.language) | ||
| - `requestParams` list of accepted [AutocompleteRequest properties](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest) | ||
| - `fetchFields` the [types](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) of Place data to return when requesting place details. If omitted defaults to `['formattedAddress', 'addressComponents']` | ||
|
|
||
|
|
||
| ## Component Properties | ||
| | Property | Type | Description | Required | Default Value | | ||
| |--------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------| | ||
| | `PUBLIC_GOOGLE_MAPS_API_KEY` | `String` | Your Google Maps Places API Key. | Yes | | | ||
| | `onResponse` | `CustomEvent` | Dispatched when a place is selected, containing the place details. | Yes | | | ||
| | `onError` | `CustomEvent` | Dispatched when an error occurs. | No | | | ||
| | `countries` | `Array` | Array of countries/regions to filter results. | No | `[]` | | ||
| | `placeholder` | `String` | Placeholder text for the input field. | No | `"Search..."` | | ||
| | `autocomplete` | `string` | HTML `autocomplete` attribute for the input field. Set to "off" to disable browser autocomplete. | No | `"off"` | | ||
| | `requestParams` | `Object` | Object for additional request parameters (e.g., `types`, `bounds`). See [AutocompleteRequest](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). | No | `{}` | | ||
| | `fetchFields` | `Array` | Array of place data fields to return. See [Supported Fields](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult) | No | `['formattedAddress', 'addressComponents']` | | ||
|
|
||
|
|
||
| ## Error Handling | ||
|
|
||
|
|
@@ -150,13 +131,12 @@ The `onError` event will be dispatched if there is an issue with the Google Maps | |
|
|
||
| ```svelte | ||
| <script> | ||
| // ... other imports | ||
| // ... other imports | ||
| // Error handler | ||
| let pacError = ''; | ||
| let onError = (error: string) => { | ||
| console.error(error); | ||
| pacError = error; | ||
| // Error handler | ||
| let pacError = ''; | ||
| let onError = (error: string) => { | ||
| pacError = error; | ||
| }; | ||
| </script> | ||
|
|
||