Request Parameters

The requestParams prop is a powerful feature that allows you to fine-tune the search behavior 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.

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

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

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

It's important to understand the difference: locationBias prefers results in an area but will show others, while locationRestriction only shows results within that area. You should typically use one or the other, not both.

Previous: Properties
Next: Request Parameters Playground