Request Parameters

The requestParams prop is a powerful feature that allows you to fine-tune the search behaviour of the Places Autocomplete component. By passing an object to this prop, you can control how the Google Places API filters, biases, and ranks suggestions.

This object directly corresponds to the AutocompleteRequest interface in the Google Maps JavaScript API.

Basic Structure

You define `requestParams` as an object and pass it to the component. The component will then use these parameters for every API call it makes.

🌍 Internationally Neutral by Default

By default, the component does not set language or region parameters, making it internationally neutral. This allows the Google Maps API to use browser settings and IP-based location detection to provide the most relevant results for each user. You can override this behavior by explicitly setting these parameters.

<script> 
...
/**
* @type object optional
* AutocompleteRequest properties
*/
const requestParams = {
	region: 'GB',
	language: 'en-GB'
}
</script>

<PlaceAutocomplete  
{onResponse} 
{onError} 
{requestParams} 
{PUBLIC_GOOGLE_MAPS_API_KEY} />
...

inputOffset (Default)

The inputOffset parameter specifies the minimum number of characters a user must type before the component starts making API requests. The default value is 0, meaning suggestions will appear as soon as the user starts typing.

💡 Why This Matters

Setting an appropriate inputOffset helps reduce unnecessary API calls and improves user experience. You can increase this value (e.g., to 3) to avoid overly broad results from short queries and reduce API costs.

Below is a reference for some of the most common and useful parameters you can configure.

region

The region parameter biases the results to a specific country, specified as a two-character CLDR code. This is a "bias," not a strict restriction, meaning results from other regions may still appear, especially if they are highly relevant.

const requestParams = {
/**
* @type string optional
*/
region : 'GB',  
}

language

Use the language parameter to specify the language for the returned suggestions. If omitted, the API defaults to the browser's language setting. See the list of supported languages.

const requestParams = {
/**
* @type string optional
*/
language : 'en-GB',
}

includedPrimaryTypes

Filter results to specific categories by providing an array of place types. You can specify up to 5 types. This is useful for applications targeting specific kinds of places, like restaurants or airports. See the official Place Types documentation for a full list.

const requestParams = {
/**
* @type array optional
*/
includedPrimaryTypes : ['restaurant', 'bar', 'cafe'],
}

includedRegionCodes

To strictly limit results to a set of countries, use includedRegionCodes. This takes an array of up to 15 two-character CLDR codes. Unlike the `region` prop, this is a hard filter.

const requestParams = {
/**
* @type array optional
*/
includedRegionCodes : ['GB', 'DE', 'IT'],
}

locationBias

Bias results towards a specific geographical area to make them more prominent. This is useful for prioritizing nearby results without completely excluding others. It accepts a LocationBias object.

const requestParams = {
	/**
	* @type object optional
	*/
	locationBias : {
		"lat":53.30133845118124,
		"lng":-1.8017578125
	},
}

locationRestriction

Strictly confine search results to a specific geographical area. Results outside this area will not be shown. It accepts a LocationRestriction object.

const requestParams = {
	/**
	* @type object optional
	*/
	locationRestriction:{
		"north":54.09994059671522,
		"east":-0.7812994437747967,
		"south":52.844531447174056,
		"west":-3.6816900687747967
	}
}

📍 Bias vs Restriction

locationBias: Prefers results in the specified area but can still show relevant results outside it.

locationRestriction: Strictly limits results to the specified area. No results outside this boundary will appear.

💡 Tip: Use one or the other, not both in the same request.

origin (Distance Calculation)

Specify an origin point to calculate and display the distance from that point to each suggestion. This is particularly useful for delivery apps, store locators, or any application where proximity matters.

const requestParams = {origin: { lat: 51.5074, lng: -0.1278 }, // London coordinates// Distance will be shown next to each suggestion};

💡 Distance Display

When origin is provided and the component's options.distance is true (default), the distance from the origin to each suggestion will be displayed. You can also configure the units via options.distance_units ('km' or 'miles').

🎮 Try the Interactive Playground

Want to experiment with different parameter combinations? Check out the Request Parameters Playground to see how each setting affects search results in real-time.

Previous: Properties
Next: Request Parameters Playground