Advanced Example

This example demonstrates the power and flexibility of the component by leveraging several advanced properties: requestParams, fetchFields, and options. Together, these props allow you to fine-tune the API request, specify the data you need, and customize the component's behavior to fit your application's requirements.

Live Demo

Configuration Breakdown

Here’s a closer look at the properties used to configure the component in this demo.

1. Request Parameters

The requestParams prop modifies the underlying Autocomplete request. In this case, we're restricting results to Great Britain and setting a location bias to favour results near Blackpool.

const requestParams = {
  "language": "en-gb",
  "region": "GB",
  "includedRegionCodes": [
    "GB"
  ],
  "origin": {
    "lat": 53.7653865,
    "lng": -3.0181503
  }
};

2. Fetch Fields

Using fetchFields, we explicitly ask for the data fields we need. This is a Google Maps API best practice that helps manage costs and improve performance.

const fetchFields = [
  "formattedAddress",
  "addressComponents"
];

3. Component Options

The options prop controls the component's UI and behavior. Here, we've set a custom placeholder, enabled distance calculation (in kilometers), and applied a custom CSS class to the highlighted suggestion.

const options = {
  "placeholder": "Search for a location in Great Britain...",
  "distance": true,
  "distance_units": "km",
  "clear_input": true,
  "classes": {
    "li_current": "bg-green-500"
  }
};

Full Code Example

Here is the complete code for this advanced example. You can use this as a starting point for your own implementation.

<script>
import { browser } from '$app/environment';
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import { initialiseGMaps, setGMapsContext, importLibrary } from 'places-autocomplete-svelte/gmaps';
import type {PlaceResult,ComponentOptions } from 'places-autocomplete-svelte/interfaces';

let { data } = $props();
const PUBLIC_GOOGLE_MAPS_API_KEY = data?.PUBLIC_GOOGLE_MAPS_API_KEY;

// 1. Set the context for Google Maps. This should be done in the script's top-level scope.
setGMapsContext();

// 2. If we are in the browser, trigger the asynchronous loading process.
if (browser) {
	initialiseGMaps({
		key: PUBLIC_GOOGLE_MAPS_API_KEY,
		v: 'weekly' 
	}).catch((error: any) => {
		// ... handle error (already logged in initialiseGMaps)
	});
}

// --- Event Handlers ---
const onResponse = (response: PlaceResult) => {
	console.log('Place Selected:', response);
};

const onError = (error: string) => {
	console.error('Places Autocomplete Error:', error);
};

// --- Component Options ---
// See Properties for full list
const options: Partial<ComponentOptions> = {
	distance: true,
	distance_units: 'km',
	clear_input: true,
	placeholder: 'Start typing your address',
	classes: {
		li_current: 'bg-green-500',
	}
};

// --- Request Parameters ---
// See Request Parameters for full list
const requestParams = {
	region : 'GB',
	language : 'en-GB',      
};

// --- Fetch Fields ---
// Specify which fields to fetch from the Places API
const fetchFields = ['formattedAddress', 'addressComponents'];

</script>

<PlaceAutocomplete {options} {requestParams} {fetchFields} {onResponse} {onError} />

Previous: Basic Example
Next: Reactive Parameters