places-autocomplete-svelte 2.0.7 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +39 -66
  2. package/dist/PlaceAutocomplete.svelte +18 -65
  3. package/dist/PlaceAutocomplete.svelte.d.ts +7 -16
  4. package/package.json +11 -6
package/README.md CHANGED
@@ -2,14 +2,16 @@
2
2
 
3
3
  This Svelte component leverages the [Google Maps Places Autocomplete API](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview) to provide a user-friendly way to search for and retrieve detailed address information within your [SvelteKit](https://kit.svelte.dev) applications.
4
4
 
5
+ Preview this package [Demo](https://2bbb9bef.places-autocomplete-demo.pages.dev/)
6
+
5
7
  ## Features:
6
8
 
7
9
  - **Seamless Integration:** Easily integrate the component into your SvelteKit projects.
8
10
  - **Autocomplete Suggestions:** Provide users with real-time suggestions as they type, enhancing the search experience.
9
11
  - **Detailed Address Retrieval:** Retrieve comprehensive address information, including street address, city, region, postal code, and country.
10
- - **Formatted and Unformatted Responses:** Access both formatted address strings and raw address component data for flexible use cases.
11
12
  - **Country/Region Selection:** Allow users to specify a region for more targeted results.
12
- - **Customizable:** Tailor the component's appearance and behavior using language settings and placeholder text.
13
+ - **Customizable:** Tailor the component's appearance and behavior using language settings, placeholder text.
14
+ - **Accessible:** Supports keyboard navigation for selecting suggestions.
13
15
 
14
16
  ![Places Autocomplete Svelte](places-autocomplete-svelte.gif)
15
17
 
@@ -32,25 +34,30 @@ npm i places-autocomplete-svelte@1.0.1
32
34
 
33
35
  ## Basic Usage
34
36
 
35
- 1. **Provide your Google Maps API Key:** Replace `'--YOUR_API_KEY--'` with your actual Google Maps API key.
36
- 2. **Bind to Address Variables:** Use `bind:formattedAddress` to capture the selected address as string.
37
+ 1. **Provide your Google Maps API Key:** Replace `'___YOUR_API_KEY___'` with your actual Google Maps API key.
38
+ 2. **Handle the Response:** Use the `onResponse` callback to receive the selected place details.
37
39
 
38
40
  ```svelte
39
41
  <script>
40
42
  import { PlaceAutocomplete } from 'places-autocomplete-svelte';
41
43
 
42
- let formattedAddress = '';
43
- let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
44
+ const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';
45
+
46
+ let fullResponse = $state('')
47
+ let onResponse = (response) => {
48
+ console.log(response)
49
+ fullResponse = response;
50
+ };
44
51
  </script>
45
52
 
46
- <PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:formattedAddress />
53
+ <PlaceAutocomplete {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} />
47
54
 
48
- <p>Formatted Address: {formattedAddress}</p>
55
+ <p>Response Object: {JSON.stringify(fullResponse, null, 2)}</p>
49
56
  ```
50
57
 
51
- ## Specifying Countries/Regions
58
+ ## Countries/Regions
52
59
 
53
- Use the `countries` property to refine search by region:
60
+ Use optional `countries` property to refine search by region:
54
61
 
55
62
  ```svelte
56
63
  <script>
@@ -63,66 +70,12 @@ Use the `countries` property to refine search by region:
63
70
  ];
64
71
  </script>
65
72
 
66
- <PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:formattedAddress bind:countries />
73
+ <PlaceAutocomplete {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} bind:countries/>
67
74
  ```
68
75
 
69
76
  - The `region` code follows the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest).
70
77
  - The `language` in which to return results. [See details](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.language)
71
78
 
72
- ## Accessing Full Response Data
73
-
74
- For maximum flexibility, access the complete unformatted response from the Google Maps API:
75
-
76
- ```svelte
77
- <script>
78
- // ... other imports
79
- let fullResponse = {};
80
- </script>
81
-
82
- <PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:fullResponse />
83
-
84
- <pre>{JSON.stringify(fullResponse, null, 2)}</pre>
85
- ```
86
-
87
- ## Example
88
-
89
- ```svelte
90
- <script>
91
- import { PlaceAutocomplete } from 'places-autocomplete-svelte';
92
-
93
- let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
94
- let formattedAddress = '';
95
- let fullResponse = {};
96
- let formattedAddressObj = {};
97
- let countries = [
98
- { name: 'United Kingdom', region: 'GB' , language:'en-GB'},
99
- { name: 'United States', region: 'US',language:'en-US' },
100
- // ... more countries
101
- ];
102
- </script>
103
-
104
- <PlaceAutocomplete
105
- bind:PUBLIC_GOOGLE_MAPS_API_KEY
106
- bind:formattedAddress
107
- bind:fullResponse
108
- bind:formattedAddressObj
109
- bind:countries
110
- placeholder="Enter your address...">
111
-
112
- ```
113
-
114
- - The `formattedAddress` - selected address as string.
115
- - The `fullResponse` - the complete unformatted response from the Google Maps API.
116
- - The `formattedAddressObj` - parsed address components, containing individual elements like street number, town, and postcode.
117
-
118
- The `formattedAddressObj` mapping corresponds to the following component types:
119
-
120
- - `formattedAddressObj.street_number`: longText property of the street_number
121
- - `formattedAddressObj.street`: longText property of the route
122
- - `formattedAddressObj.town`: longText property of the postal_town
123
- - `formattedAddressObj.county`: longText property of the administrative_area_level_2
124
- - `formattedAddressObj.country_iso2`: shortText property of the country
125
- - `formattedAddressObj.postcode`: longText property of the postal_code
126
79
 
127
80
  ## Error Handling
128
81
 
@@ -145,13 +98,33 @@ Handle these errors gracefully in your application:
145
98
  };
146
99
  </script>
147
100
 
148
- <PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY {onError} />
101
+ <PlaceAutocomplete {onError} {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} />
149
102
 
150
103
  {#if pacError}
151
104
  <p class="error">{pacError}</p>
152
105
  {/if}
153
106
  ```
154
107
 
108
+ ## Customization
109
+
110
+ - Placeholder: Use the placeholder property to customize the input field's placeholder text.
111
+ - Language: Use the language property to set the language of the autocomplete results.
112
+ - 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.
113
+ - Autocomplete: Use to disable the input autocomplete.
114
+
115
+ ```svelte
116
+ <script>
117
+ // ... other imports
118
+ const placeholder = 'Search...';
119
+ const language = 'en-GB';
120
+ const region = 'GB';
121
+ const autocompete = 'off';
122
+ </script>
123
+
124
+ <PlaceAutocomplete {onError} {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} bind:countries {placeholder} {language} {region} {autocomplete}/>
125
+
126
+ ```
127
+
155
128
  ## Contributing
156
129
 
157
130
  Contributions are welcome! Please open an issue or submit a pull request on the [GitHub repository](https://github.com/alexpechkarev/places-autocomplete-svelte/).
package/dist/PlaceAutocomplete.svelte CHANGED
@@ -6,18 +6,13 @@
6
6
  // Props Interface
7
7
  interface Props {
8
8
  PUBLIC_GOOGLE_MAPS_API_KEY: string;
9
- fetchFields: string[];
9
+ fetchFields?: string[];
10
10
  countries: { name: string; region: string }[];
11
- formattedAddress: string;
12
- fullResponse: { longText: string; shortText: string; types: Array<string> }[];
13
- formattedAddressObj: {
14
- street_number: string;
15
- street: string;
16
- town: string;
17
- county: string;
18
- country_iso2: string;
19
- postcode: string;
20
- };
11
+ placeholder?: string;
12
+ language?: string;
13
+ region?: string;
14
+ autocomplete?: AutoFill;
15
+ onResponse: (e: Event) => void;
21
16
  onError: (error: string) => void;
22
17
  }
23
18
  // Bindable Props
@@ -29,16 +24,11 @@
29
24
  */
30
25
  fetchFields = $bindable(['formattedAddress', 'addressComponents']),
31
26
  countries = $bindable([]),
32
- formattedAddress = $bindable(''),
33
- fullResponse = $bindable([]),
34
- formattedAddressObj = $bindable({
35
- street_number: '',
36
- street: '',
37
- town: '',
38
- county: '',
39
- country_iso2: '',
40
- postcode: ''
41
- }),
27
+ placeholder = $bindable('Search...'),
28
+ language = $bindable('en-GB'),
29
+ region = $bindable('GB'),
30
+ autocomplete = $bindable('off'),
31
+ onResponse = $bindable((e: Event) => {}),
42
32
  onError = $bindable((error: string) => {})
43
33
  }: Props = $props();
44
34
 
@@ -55,8 +45,8 @@
55
45
  //https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.includedPrimaryTypes
56
46
  let request = $state({
57
47
  input: '',
58
- language: 'en-GB',
59
- region: 'GB',
48
+ language: language,
49
+ region: region,
60
50
  sessionToken: ''
61
51
  });
62
52
 
@@ -92,6 +82,7 @@
92
82
  }
93
83
 
94
84
  request.input = target.value;
85
+
95
86
  try {
96
87
  const { suggestions } =
97
88
  await placesApi.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
@@ -124,44 +115,7 @@
124
115
  fields: fetchFields
125
116
  });
126
117
  let placeData = place.toJSON();
127
- formattedAddressObj = {
128
- street_number: '',
129
- street: '',
130
- town: '',
131
- county: '',
132
- country_iso2: '',
133
- postcode: ''
134
- };
135
-
136
- title = 'Selected address: ' + placeData.formattedAddress;
137
- formattedAddress = placeData.formattedAddress;
138
- fullResponse = placeData.addressComponents;
139
-
140
- for (const component of placeData.addressComponents) {
141
- switch (component.types[0]) {
142
- case 'street_number':
143
- case 'point_of_interest':
144
- case 'establishment':
145
- formattedAddressObj.street_number = component.longText;
146
- break;
147
- case 'route':
148
- case 'premise':
149
- formattedAddressObj.street = component.longText;
150
- break;
151
- case 'postal_town':
152
- formattedAddressObj.town = component.longText;
153
- break;
154
- case 'administrative_area_level_2':
155
- formattedAddressObj.county = component.longText;
156
- break;
157
- case 'country':
158
- formattedAddressObj.country_iso2 = component.shortText;
159
- break;
160
- case 'postal_code':
161
- formattedAddressObj.postcode = component.longText;
162
- break;
163
- }
164
- }
118
+ onResponse(placeData);
165
119
  } catch (e: any) {
166
120
  onError(
167
121
  (e.name || 'An error occurred') + ' - ' + (e.message || 'error fetching place details')
@@ -263,7 +217,8 @@
263
217
  name="search"
264
218
  bind:this={inputRef}
265
219
  class="border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm"
266
- placeholder="Search..."
220
+ placeholder={placeholder}
221
+ autocomplete={autocomplete}
267
222
  aria-controls="options"
268
223
  bind:value={request.input}
269
224
  oninput={makeAcRequest}
@@ -329,9 +284,7 @@
329
284
  </div>
330
285
  </div>
331
286
 
332
- <div class="lg:col-span-6 mt-2">
333
- <div class="text-sm font-medium leading-6 text-gray-500">{title}</div>
334
- </div>
287
+
335
288
  </div>
336
289
  </section>
337
290
  <style>
package/dist/PlaceAutocomplete.svelte.d.ts CHANGED
@@ -1,24 +1,15 @@
1
1
  declare const PlaceAutocomplete: import("svelte").Component<{
2
2
  PUBLIC_GOOGLE_MAPS_API_KEY: string;
3
- fetchFields: string[];
3
+ fetchFields?: string[];
4
4
  countries: {
5
5
  name: string;
6
6
  region: string;
7
7
  }[];
8
- formattedAddress: string;
9
- fullResponse: {
10
- longText: string;
11
- shortText: string;
12
- types: Array<string>;
13
- }[];
14
- formattedAddressObj: {
15
- street_number: string;
16
- street: string;
17
- town: string;
18
- county: string;
19
- country_iso2: string;
20
- postcode: string;
21
- };
8
+ placeholder?: string;
9
+ language?: string;
10
+ region?: string;
11
+ autocomplete?: AutoFill;
12
+ onResponse: (e: Event) => void;
22
13
  onError: (error: string) => void;
23
- }, {}, "PUBLIC_GOOGLE_MAPS_API_KEY" | "fetchFields" | "formattedAddress" | "countries" | "fullResponse" | "formattedAddressObj" | "onError">;
14
+ }, {}, "PUBLIC_GOOGLE_MAPS_API_KEY" | "fetchFields" | "countries" | "placeholder" | "language" | "region" | "autocomplete" | "onResponse" | "onError">;
24
15
  export default PlaceAutocomplete;
package/package.json CHANGED
@@ -1,18 +1,22 @@
1
1
  {
2
2
  "name": "places-autocomplete-svelte",
3
3
  "license": "MIT",
4
- "version": "2.0.7",
5
- "description": "A Svelte component that leverages the power of Google Places New API to provide a user-friendly autocomplete experience for location searches.",
4
+ "version": "2.0.8",
5
+ "description": "A lightweight and customizable Svelte component for easy integration of Google Maps Places Autocomplete (New API) in your Svelte/SvelteKit applications. Provides accessible autocomplete suggestions and detailed address retrieval.",
6
6
  "keywords": [
7
7
  "svelte",
8
+ "sveltekit",
8
9
  "autocomplete",
9
- "location",
10
- "search",
11
10
  "google-maps",
12
11
  "google-places",
13
- "places-api",
12
+ "places-autocomplete",
13
+ "location",
14
+ "geocoding",
15
+ "address",
16
+ "address-input",
14
17
  "input",
15
- "address"
18
+ "search",
19
+ "new api"
16
20
  ],
17
21
  "homepage": "https://github.com/alexpechkarev",
18
22
  "repository": {
@@ -68,6 +72,7 @@
68
72
  "@sveltejs/kit": "^2.7.3",
69
73
  "@sveltejs/package": "^2.3.7",
70
74
  "@sveltejs/vite-plugin-svelte": "^4.0.0",
75
+ "@tailwindcss/typography": "^0.5.15",
71
76
  "@types/eslint": "^9.6.1",
72
77
  "autoprefixer": "^10.4.20",
73
78
  "eslint": "^9.13.0",