places-autocomplete-svelte 2.2.16 → 2.2.18

package/README.md

@@ -5,7 +5,11 @@
 
 A flexible, accessible, and secure [Svelte](https://kit.svelte.dev) component leveraging the [Google Maps Places Autocomplete API (New)](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview).
 
-The component handles API loading, session tokens, debounced fetching, and accessibility, allowing you to focus on building your application. It intelligently manages the Google Maps API loader, creating a shared instance that prevents conflicts with other map components on the same page. 
+The component handles API loading, session tokens, debounced fetching, and accessibility, allowing you to focus on building your application. It intelligently manages the Google Maps API loader, creating a shared instance via Svelte's context that prevents conflicts with other map components on the same page.
+
+**Two initialisation patterns:**
+- **Simple/Automatic**: Pass your API key directly to the component for basic use cases
+- **Advanced/Manual**: Initialise the loader once in a parent component when using multiple Google Maps libraries or components 
 
 ## Available: Standalone JavaScript Library
 
@@ -53,115 +57,122 @@ yarn add places-autocomplete-svelte
 
 ## Usage
 
-Provide your Google Maps API key to the component. It will automatically handle loading the required `places` library.
+### Basic Usage (Automatic Initialisation)
 
-```javascript
-<script lang="ts">
-import { PlaceAutocomplete } from 'places-autocomplete-svelte';
-import type { PlaceResult, ComponentOptions, RequestParams } from 'places-autocomplete-svelte/interfaces';
+For simple use cases, just pass your API key to the component. It will automatically handle the Google Maps loader initialisation:
 
-// Get API Key securely (e.g., from environment variables)
-const PUBLIC_GOOGLE_MAPS_API_KEY = import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY;
 
-// --- Event Handlers ---
-let fullResponse: PlaceResult | null = $state(null);
-let placesError = $state('');
+```javascript
+<script lang="ts">
+    import { PlaceAutocomplete } from 'places-autocomplete-svelte';
+    import type { PlaceResult } from 'places-autocomplete-svelte/interfaces';
 
-const handleResponse = (response: PlaceResult) => {
-	console.log('Place Selected:', response);
-	fullResponse = response;
-	placesError = ''; // Clear previous errors
-};
+    // Get API Key securely (e.g., from environment variables)
+    const PUBLIC_GOOGLE_MAPS_API_KEY = import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY;
 
-const handleError = (error: string) => {
-	console.error('Places Autocomplete Error:', error);
-	placesError = error;
-	fullResponse = null; // Clear previous results
-};
+    const handleResponse = (response: PlaceResult) => {
+        console.log('Selected:', response.formattedAddress);
+    };
 
-// --- Configuration (Optional) ---
-const requestParams: Partial<RequestParams> = $state({
-	region: 'GB',
-	language: 'en-GB',
-});
-const fetchFields: string[] = $state(['formattedAddress', 'addressComponents', 'displayName']);
-const options: Partial<ComponentOptions> = $state({
-	placeholder: 'Start typing your address...',
-	debounce: 200,
-	classes: {
-		input: 'my-custom-input-class border-blue-500',
-		highlight: 'bg-yellow-200 text-black',
-	},
-    clear_input: false,
-});
+    const handleError = (error: string) => {
+        console.error('Error:', error);
+    };
 </script>
 
-{#if placesError}
-    <div class="error-message" role="alert">
-        Error: {placesError}
-    </div>
-{/if}
-
-<PlaceAutocomplete
+<PlaceAutocomplete 
     {PUBLIC_GOOGLE_MAPS_API_KEY}
-    {requestParams}
-    {fetchFields}
-    {options}
-    onResponse={handleResponse}
-    onError={handleError}
+    onResponse={handleResponse} 
+    onError={handleError} 
 />
+```
 
-{#if fullResponse}
-    <h2>Selected Place Details:</h2>
-    <pre>{JSON.stringify(fullResponse, null, 2)}</pre>
-{/if}
+### Advanced Usage (Manual Initialisation)
 
-<style>
-    :global(.my-custom-input-class) {
-        padding: 0.75rem;
-        border-radius: 0.25rem;
-        width: 100%;
-    }
-    .error-message {
-        color: red;
-        margin-bottom: 1rem;
-    }
-</style>
-```
+For applications that need multiple Google Maps libraries (e.g., `places`, `maps`, `marker`) or multiple map components, initialise the loader once in a parent component. This approach:
 
-### Advanced: Using with other Google Maps Libraries
+- Loads all required libraries in a single API call (more efficient)
+- Prevents "Loader must not be called again" errors
+- Shares the loader instance across all child components via Svelte context
+- Works seamlessly with SvelteKit's SSR (only initialises in the browser)
 
-You can reuse the shared Google Maps loader created by the `PlaceAutocomplete` component to load other libraries (like `maps`). Because the loader instance is shared, you can access it from any other component to load additional libraries without causing conflicts.
+**When to use manual initialisation:**
+- Using multiple Google Maps components on the same page
+- Need to load multiple libraries (`maps`, `marker`, `geometry`, etc.)
+- Building a layout that shares map functionality across routes
+- Want centralised error handling for the loader
 
-The `PlaceAutocomplete` component only loads the `places` library by default. 
 ```javascript
-// In a parent component, e.g., src/routes/+page.svelte
+// In +layout.svelte or +page.svelte
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { getGMapsLoader } from 'places-autocomplete-svelte/gmaps';
-	import PlaceAutocomplete from '$lib/PlaceAutocomplete.svelte';
-
-	const PUBLIC_GOOGLE_MAPS_API_KEY = import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY;
-
-	// Pre-initialise the loader with all libraries needed for this page.
-	onMount(async () => {
-		const loader = getGMapsLoader(PUBLIC_GOOGLE_MAPS_API_KEY);
-		const { Map } = await loader.importLibrary('maps');
-        ...
-	});
+    import { browser } from '$app/environment';
+    import { PlaceAutocomplete } from 'places-autocomplete-svelte';
+    import { setGMapsContext, initialiseGMaps, importLibrary } from 'places-autocomplete-svelte/gmaps';
+    import { onMount } from 'svelte';
+
+    // 1. Set the context at the top level (must be synchronous)
+    setGMapsContext();
+
+    // 2. Initialise the loader in the browser
+    if (browser) {
+        initialiseGMaps({
+            key: import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY,
+            v: 'weekly'
+        }).catch((error) => {
+            console.error('Failed to initialise Google Maps:', error);
+        });
+    }
+
+    // 3. Load additional libraries as needed
+    let map: google.maps.Map;
+    
+    onMount(async () => {
+        const { Map } = await importLibrary('maps');
+        const { AdvancedMarkerElement } = await importLibrary('marker');
+        
+        const mapElement = document.getElementById('map');
+        if (mapElement) {
+            map = new Map(mapElement, {
+                center: { lat: 51.5072, lng: -0.1276 },
+                zoom: 10,
+                mapId: 'YOUR_MAP_ID'
+            });
+        }
+    });
+
+    // 4. Handle autocomplete responses
+    const handleResponse = (response: PlaceResult) => {
+        console.log('Selected:', response.formattedAddress);
+        // Update map with selected location
+        if (response.location && map) {
+            map.setCenter(response.location);
+            map.setZoom(15);
+        }
+    };
+
+    const handleError = (error: string) => {
+        console.error('Error:', error);
+    };
 </script>
 
-<!-- The component will now use the loader you created above -->
-<PlaceAutocomplete
-    {PUBLIC_GOOGLE_MAPS_API_KEY}
-    onResponse={...}
-    onError={...}
+<!-- The component automatically uses the shared context -->
+<!-- No need to pass PUBLIC_GOOGLE_MAPS_API_KEY when using manual initialisation -->
+<PlaceAutocomplete 
+    onResponse={handleResponse} 
+    onError={handleError} 
 />
 
-<!-- You can now use other Google Maps services, e.g., a map -->
-<div id="map"></div>
+<div id="map" class="h-96 w-full"></div>
 ```
 
+**Available helper functions from `places-autocomplete-svelte/gmaps`:**
+
+- `setGMapsContext()` - Creates the shared context (call once at the top level)
+- `getGMapsContext()` - Retrieves the context (returns stores for initialisation state and errors)
+- `hasGMapsContext()` - Checks if context exists (useful for conditional logic)
+- `initialiseGMaps(options)` - Initialises the loader with your API key and options
+- `initialiseGMapsNoContext(options)` - Initialises without context (for edge cases)
+- `importLibrary(library)` - Dynamically imports Google Maps libraries
+
 ## Security
 
 ### API Key Security
@@ -189,12 +200,14 @@ This component is built to be accessible and follows the [WAI-ARIA Authoring Pra
 
 | Prop | Type | Required | Default | Description |
 | :--- | :--- | :--- | :--- | :--- |
-| `PUBLIC_GOOGLE_MAPS_API_KEY` | `string` | Yes | - | Your restricted Google Maps API Key. |
-| `fetchFields` | `string[]` | No | `['formattedAddress', 'addressComponents']` | Place Data Fields to request. **Affects API cost.** |
-| `requestParams` | `Partial<RequestParams>` | No | `{ inputOffset: 3, ... }` | Parameters for the Autocomplete API request. |
-| `options` | `Partial<ComponentOptions>` | No | `{ debounce: 100, ... }` | Options to control component behavior and appearance. |
-| `onResponse` | `(response: PlaceResult) => void` | Yes | - | Callback triggered with the selected place details. |
-| `onError` | `(error: string) => void` | Yes | - | Callback triggered when an error occurs. |
+| `PUBLIC_GOOGLE_MAPS_API_KEY` | `string` | No* | - | Your Google Maps API Key. **Required for automatic initialisation.** Optional if you've initialised the loader in a parent component using `initialiseGMaps()`. |
+| `onResponse` | `(response: PlaceResult) => void` | Yes | - | Callback triggered when a user selects a place. Receives the full place details object. |
+| `onError` | `(error: string) => void` | Yes | - | Callback triggered when an error occurs (API loading, network issues, etc.). |
+| `fetchFields` | `string[]` | No | `['formattedAddress', 'addressComponents']` | Place Data Fields to request from the API. See [Place Data Fields](https://developers.google.com/maps/documentation/javascript/place-data-fields). **Affects API billing.** |
+| `requestParams` | `Partial<RequestParams>` | No | `{ inputOffset: 3 }` | Parameters for the Autocomplete API request (language, region, location bias, etc.). See RequestParams interface. |
+| `options` | `Partial<ComponentOptions>` | No | `{ debounce: 100 }` | UI and behavior options (placeholder, debounce delay, distance display, custom classes, etc.). See ComponentOptions interface. |
+
+*Either `PUBLIC_GOOGLE_MAPS_API_KEY` prop OR manual initialisation with `initialiseGMaps()` is required.
 
 ## Component Methods (Imperative API)
 
@@ -282,7 +295,36 @@ const options = {
 
 ## TypeScript
 
-This component is written in TypeScript. Import types from `places-autocomplete-svelte/interfaces` and helpers from `places-autocomplete-svelte/gmaps`.
+This component is written in TypeScript with full type definitions included.
+
+**Available imports:**
+
+```typescript
+// Component
+import { PlaceAutocomplete } from 'places-autocomplete-svelte';
+
+// Types and interfaces
+import type { 
+    PlaceResult,
+    ComponentOptions,
+    RequestParams,
+    FormattedAddress,
+    ComponentClasses,
+    Props
+} from 'places-autocomplete-svelte/interfaces';
+
+// Google Maps loader helpers
+import { 
+    setGMapsContext,
+    getGMapsContext,
+    hasGMapsContext,
+    initialiseGMaps,
+    initialiseGMapsNoContext,
+    importLibrary,
+    type GMapsContext,
+    type APIOptions
+} from 'places-autocomplete-svelte/gmaps';
+```
 
 ## Google Places API & Billing
 

package/dist/PlaceAutocomplete.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { PlaceResult, Props } from './interfaces.js';
+	import { getGMapsContext, hasGMapsContext, importLibrary, initialiseGMapsNoContext, type GMapsContext } from './gmaps.js';
 	import {
 		validateOptions,
 		validateRequestParams,
@@ -10,7 +11,13 @@
 		debounce
 	} from './helpers.js';
 
-	import { getGMapsLoader, type GMapsLoaderType } from './gmaps.js';
+
+	let gmaps: GMapsContext | undefined;
+	// Get the context synchronously. This is safe.
+	if (hasGMapsContext()) {
+		gmaps = getGMapsContext();
+	}
+	
 
 
 	let {
@@ -18,7 +25,7 @@
 		 * By default using SKU: Place Detals (Location Only) - 0.005 USD per each
 		 * @see https://developers.google.com/maps/documentation/javascript/usage-and-billing#location-placedetails
 		 */
-		PUBLIC_GOOGLE_MAPS_API_KEY,
+		PUBLIC_GOOGLE_MAPS_API_KEY='',
 		fetchFields,
 		options,
 		onResponse = $bindable((response: PlaceResult) => {}),
@@ -36,7 +43,6 @@
 	fetchFields = validateFetchFields(fetchFields);
 	//console.log(fetchFields);
 
-
 	let kbdAction = $state(''); // 'up', 'down', or 'escape'
 
 	// Local variables
@@ -44,7 +50,6 @@
 	let currentSuggestion = $state(-1);
 	let results: any[] = $state([]);
 	let placesApi: { [key: string]: any } = {};
-	let loader: GMapsLoaderType;
 
 	//https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data
 	// validate requestParams
@@ -106,6 +111,21 @@
 		return request;
 	}
 
+	// Helper function to find a specific address component
+	const getAddressComponent = (response: { addressComponents: any[]; },type: string) =>
+		response.addressComponents?.find((c: { types: string | string[]; }) => c.types.includes(type))?.longText || '';	
+
+	// Helper function to get secondary text from address components
+	const getSecondaryText = (place: { addressComponents: any[]; }) => {
+		const locality = getAddressComponent(place, 'locality');
+		const adminArea = getAddressComponent(place, 'administrative_area_level_1');
+		const postalCode = getAddressComponent(place, 'postal_code');
+		const country = getAddressComponent(place, 'country');
+
+		let components = [locality, adminArea, country, postalCode].filter(Boolean);
+		return components.join(', ');
+	};
+
 	/**
 	 * Make request and get autocomplete suggestions.
 	 * @param event
@@ -137,10 +157,16 @@
 			// Clear previous results
 			results = [];
 
+
+
 			// ieterate over suggestions and add results to an array
 			for (const suggestion of suggestions) {
 				// get prediction text
-				const predictionText = suggestion.placePrediction.text;
+				//console.log(suggestion.placePrediction.toPlace());
+				let place = suggestions[0].placePrediction.toPlace();
+				await place.fetchFields({fields: ["addressComponents"]});
+
+				const predictionText = suggestion.placePrediction.mainText;
 				const originalText = predictionText.text;
 				// Array of objects with startOffset, endOffset
 				const matches = predictionText.matches;
@@ -157,14 +183,16 @@
 				highlightedText = createHighlightedSegments(originalText, matches);
 
 				results.push({
-					place: suggestion.placePrediction.toPlace(),
-					text: highlightedText,
+					place: place,
+					mainText: highlightedText,
+					secondaryText: getSecondaryText(place),
 					distance: formatDistance(
 						suggestion.placePrediction.distanceMeters,
 						options.distance_units ?? 'km'
 					)
 				});
 			}
+			//console.log('Autocomplete suggestions:', results);
 		} catch (e: any) {
 			onError((e.name || 'An error occurred') + ' - ' + (e.message || 'see console for details.'));
 		}
@@ -213,6 +241,8 @@
 	 * Initialize the Google Maps JavaScript API Loader.
 	 */
 	onMount(async (): Promise<void> => {
+
+
 		if (isDefaultOnResponse) {
 			console.warn(
 				'PlaceAutocomplete: The `onResponse` callback has not been provided. Selected place data will not be handled. See documentation for usage.'
@@ -224,16 +254,26 @@
 		}
 
 		try {
-			loader = getGMapsLoader(PUBLIC_GOOGLE_MAPS_API_KEY);
-		} catch (e: any) {
-			onError(
-				(e.name || 'An error occurred') + ' - ' + (e.message || 'Error loading Google Maps API')
-			);
-		}
+       		// Await the promise that was stored in the context by the parent.
+            // If the parent has already finished, this resolves immediately.
+            // If the parent is still loading, this will wait.
+			if(typeof gmaps !== 'undefined' && gmaps) {
+				await gmaps?.initializationPromise;
+			}else{
+
+				// Check if the API key is provided
+				if(PUBLIC_GOOGLE_MAPS_API_KEY === '' || !PUBLIC_GOOGLE_MAPS_API_KEY) {
+					throw new Error('Google Maps API key is required. Please provide a valid API key.');
+				}
+
+				// No context available, initialize without context
+				// This will load the Google Maps script
+				// and set up the necessary objects
+				// for places API usage.
+				await initialiseGMapsNoContext({key: PUBLIC_GOOGLE_MAPS_API_KEY, 'v': 'weekly'});
+			}
 
-		try {
-			const { AutocompleteSessionToken, AutocompleteSuggestion } =
-				await loader.importLibrary('places');
+			const { AutocompleteSessionToken, AutocompleteSuggestion } = await importLibrary('places');
 
 			placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
 			placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
@@ -366,21 +406,47 @@
 										i === currentSuggestion && options.classes?.li_div_current
 									]}
 								>
-									<p
-										class={[
-											i === currentSuggestion && options.classes?.li_current,
-											options.classes?.li_div_one_p
-										]}
-									>
-										{#each p.text as segment}
-											{#if segment.highlighted}
-												<span class={options.classes?.highlight ?? 'font-bold'}>{segment.text}</span
-												>
-											{:else}
-												{segment.text}
-											{/if}
-										{/each}
-									</p>
+									{#if options.classes?.map_pin_icon}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="24"
+											height="24"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											class="size-5">{@html options.classes.map_pin_icon}</svg
+										>
+									{/if}
+
+									<div class={[options.classes?.li_div_p_container ?? '']}>
+										<p
+											class={[
+												i === currentSuggestion && options.classes?.li_current,
+												options.classes?.li_div_one_p
+											]}
+										>
+											{#each p.mainText as segment}
+												{#if segment.highlighted}
+													<span class={options.classes?.highlight ?? 'font-bold'}
+														>{segment.text}</span
+													>
+												{:else}
+													{segment.text}
+												{/if}
+											{/each}
+										</p>
+										<p
+											class={[
+												i === currentSuggestion && options.classes?.li_current,
+												options.classes?.li_div_one_p_secondaryText
+											]}
+										>
+											{p.secondaryText}
+										</p>
+									</div>
 								</div>
 							</div>
 							{#if options.distance && p.distance}

package/dist/gmaps.d.ts

@@ -1,11 +1,34 @@
-import * as GMaps from '@googlemaps/js-api-loader';
+import { type Writable } from 'svelte/store';
+import { importLibrary, type APIOptions } from "@googlemaps/js-api-loader";
+interface GMapsContext {
+    isInitialized: Writable<boolean>;
+    error: Writable<Error | null>;
+    initializationPromise: Promise<void> | null;
+}
+export type { GMapsContext, APIOptions };
 /**
- * Defines the shape of the context object that will be shared.
- * This can be expanded if you need to share more than just the loader.
+ * Creates and sets the Google Maps context with writable stores.
+ * This is synchronous and should be called once in a top-level component's script.
  */
-export type GMapsLoaderType = GMaps.Loader;
+export declare function setGMapsContext(): void;
 /**
- * Gets the Google Maps Loader instance from Svelte's context.
- * @returns {typeof Loader}
+ * Retrieves the shared Google Maps context.
+ * @returns {GMapsContext} The stores for initialization status and errors.
  */
-export declare const getGMapsLoader: (PUBLIC_GOOGLE_MAPS_API_KEY: string, version?: string | undefined) => GMaps.Loader;
+export declare function getGMapsContext(): GMapsContext;
+export declare function hasGMapsContext(): boolean;
+/**
+ * Asynchronously initializes the Google Maps loader using the provided context.
+ * This function is idempotent and safe to be called multiple times.
+ * @param context - The GMapsContext object.
+ * @param options - The options for the JS API loader, including your API key.
+ * @returns {Promise<void>}
+ */
+export declare function initialiseGMaps(options: APIOptions): Promise<void>;
+/**
+ * Initializes the Google Maps API without using the context.
+ * @param options The options for the JS API loader, including your API key.
+ * @returns A promise that resolves when the API is initialized.
+ */
+export declare function initialiseGMapsNoContext(options: APIOptions): Promise<void>;
+export { importLibrary };

package/dist/gmaps.js

@@ -1,23 +1,87 @@
-import { getContext, setContext, hasContext } from 'svelte';
-import * as GMaps from '@googlemaps/js-api-loader';
-const { Loader } = GMaps;
+import { getContext, setContext } from 'svelte';
+import { writable, get } from 'svelte/store';
+import { setOptions, importLibrary } from "@googlemaps/js-api-loader";
+const LOADER_CONTEXT_KEY = Symbol('gmaps-loader');
 /**
- * A unique key for setting and getting the Google Maps Loader instance from Svelte's context.
- * This allows multiple components to share a single loader instance.
+ * Creates and sets the Google Maps context with writable stores.
+ * This is synchronous and should be called once in a top-level component's script.
  */
-const gmapsContextKey = Symbol('pacgmaps');
+export function setGMapsContext() {
+    // Only set the context if it doesn't already exist.
+    if (getContext(LOADER_CONTEXT_KEY))
+        return;
+    setContext(LOADER_CONTEXT_KEY, {
+        isInitialized: writable(false),
+        error: writable(null),
+        initializationPromise: null, // Will be set by the loader function
+    });
+}
 /**
- * Gets the Google Maps Loader instance from Svelte's context.
- * @returns {typeof Loader}
+ * Retrieves the shared Google Maps context.
+ * @returns {GMapsContext} The stores for initialization status and errors.
  */
-export const getGMapsLoader = (PUBLIC_GOOGLE_MAPS_API_KEY, version) => {
-    version = version || 'weekly';
-    if (!hasContext(gmapsContextKey)) {
-        const loader = new Loader({
-            apiKey: PUBLIC_GOOGLE_MAPS_API_KEY,
-            version: version,
-        });
-        setContext(gmapsContextKey, loader);
+export function getGMapsContext() {
+    const context = getContext(LOADER_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Google Maps context not found. Call setGMapsContext in a parent component.');
     }
-    return getContext(gmapsContextKey);
-};
+    return context;
+}
+export function hasGMapsContext() {
+    const context = getContext(LOADER_CONTEXT_KEY);
+    return !!context;
+}
+/**
+ * Asynchronously initializes the Google Maps loader using the provided context.
+ * This function is idempotent and safe to be called multiple times.
+ * @param context - The GMapsContext object.
+ * @param options - The options for the JS API loader, including your API key.
+ * @returns {Promise<void>}
+ */
+export async function initialiseGMaps(options) {
+    // Get the context internally
+    const context = getGMapsContext();
+    // If the promise already exists, just await it. Don't re-initialize.
+    if (context.initializationPromise) {
+        return context.initializationPromise;
+    }
+    // If it's already marked as initialized (e.g., from a previous page navigation), resolve immediately.
+    if (get(context.isInitialized)) {
+        return Promise.resolve();
+    }
+    // Create the promise and store it in the context object.
+    context.initializationPromise = new Promise((resolve, reject) => {
+        try {
+            setOptions(options); // Await the setOptions which returns a promise
+            context.isInitialized.set(true);
+            resolve();
+        }
+        catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            context.error.set(error);
+            console.error("Failed to set Google Maps API options.", error);
+            reject(error);
+        }
+    });
+    return context.initializationPromise;
+}
+/**
+ * Initializes the Google Maps API without using the context.
+ * @param options The options for the JS API loader, including your API key.
+ * @returns A promise that resolves when the API is initialized.
+ */
+export function initialiseGMapsNoContext(options) {
+    return new Promise((resolve, reject) => {
+        try {
+            setOptions(options);
+            resolve();
+        }
+        catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            console.error("Failed to set Google Maps API options.", error);
+            reject(error);
+        }
+    });
+}
+// Re-export importLibrary for components to use.
+export { importLibrary };

package/dist/helpers.js

@@ -302,12 +302,15 @@ export const componentClasses = {
     kbd_active: 'bg-indigo-500 text-white',
     ul: 'absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm divide-y divide-gray-100',
     li: 'z-50 cursor-default select-none py-2 px-2 lg:px-4 text-gray-900 hover:bg-indigo-500 hover:text-white',
-    li_current: 'bg-indigo-500',
+    li_current: 'bg-indigo-500 !text-white',
     li_a: 'block w-full flex justify-between',
-    li_a_current: 'text-white',
+    li_a_current: '!text-white',
     li_div_container: 'flex min-w-0 gap-x-4',
-    li_div_one: 'min-w-0 flex-auto',
-    li_div_one_p: 'text-sm/6 ',
+    li_div_one: 'min-w-0 flex-auto flex gap-x-2 justify-center items-center',
+    li_div_p_container: 'min-w-0 flex-auto',
+    li_div_one_p: 'text-sm/6 text-left',
+    map_pin_icon: '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
+    li_div_one_p_secondaryText: 'text-xs text-left text-gray-500 leading-2',
     li_div_two: 'shrink-0 flex flex-col items-end min-w-16',
     li_div_two_p: 'mt-1 text-xs/5',
     highlight: 'font-bold',

package/dist/interfaces.d.ts

@@ -63,7 +63,7 @@ export interface FormattedAddress {
     postcode: string;
 }
 export interface Props {
-    PUBLIC_GOOGLE_MAPS_API_KEY: string;
+    PUBLIC_GOOGLE_MAPS_API_KEY?: string;
     options?: ComponentOptions;
     fetchFields?: string[];
     libraries?: string[];

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "places-autocomplete-svelte",
 	"license": "MIT",
-	"version": "2.2.16",
+	"version": "2.2.18",
 	"description": "A flexible, accessible, and secure Svelte component leveraging the Google Maps Places Autocomplete API (New) to provide a user-friendly way to search for and retrieve detailed address information.",
 	"keywords": [
 		"svelte",
@@ -55,7 +55,7 @@
 		"./gmaps": {
 			"types": "./dist/gmaps.d.ts",
 			"svelte": "./dist/gmaps.js"
-		},		
+		},
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
@@ -75,38 +75,38 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^6.1.0",
-		"@sveltejs/adapter-cloudflare": "^7.2.2",
-		"@sveltejs/kit": "^2.36.1",
-		"@sveltejs/package": "^2.5.0",
-		"@sveltejs/vite-plugin-svelte": "^6.1.3",
-		"@tailwindcss/postcss": "^4.1.12",
-		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.1.12",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-cloudflare": "^7.2.4",
+		"@sveltejs/kit": "^2.49.0",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/postcss": "^4.1.17",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.17",
 		"@types/eslint": "^9.6.1",
 		"@types/google.maps": "^3.58.1",
-		"@types/node": "^24.3.0",
-		"autoprefixer": "^10.4.21",
-		"eslint": "^9.34.0",
+		"@types/node": "^24.10.1",
+		"autoprefixer": "^10.4.22",
+		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.11.0",
-		"globals": "^16.3.0",
+		"eslint-plugin-svelte": "^3.13.0",
+		"globals": "^16.5.0",
 		"postcss": "^8.5.6",
-		"prettier": "^3.6.2",
+		"prettier": "^3.7.3",
 		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.12",
-		"svelte": "^5.38.2",
-		"svelte-check": "^4.3.1",
-		"tailwindcss": "^4.1.12",
+		"publint": "^0.3.15",
+		"svelte": "^5.45.2",
+		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.17",
 		"tslib": "^2.8.1",
-		"typescript": "^5.9.2",
-		"typescript-eslint": "^8.40.0",
-		"vite": "^7.1.3"
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.48.0",
+		"vite": "^7.2.4"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/PlaceAutocomplete.svelte.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@googlemaps/js-api-loader": "^1.16.10"
+		"@googlemaps/js-api-loader": "^2.0.2"
 	}
 }