Type-Specific Search

Live Demo

Select a place type from the dropdown below to filter the autocomplete suggestions. The search will only return places matching the selected category.

Select Place Type RestaurantsCafésHotelsHospitalsBanksPharmaciesGymsLibrariesMuseumsParksShopping CentresSupermarkets

Establishments that serve prepared food

powered by

Common Place Types

Google Maps provides an extensive list of place types. Here are some commonly used categories:

View the complete list of place types in the Google Maps documentation.

How It Works

Type-specific filtering uses the Places API's type system to narrow down search results.

1. Use includedPrimaryTypes: Add the includedPrimaryTypes array to your requestParams. This tells the API to only return places matching these types. You can specify multiple types if needed.
2. Choose Appropriate Types: Select types that match your application's purpose. Use specific types (e.g., "restaurant") rather than broad categories for more precise results.
3. Handle Type Changes: When users switch between types, update the reactive requestParams and use a {#key} block to force component re-initialisation with the new type filter.
4. Display Type Information: Request the types field in fetchFields to show what category the place belongs to. This helps users understand the search results.
5. Combine with Other Filters: Type filtering works alongside other parameters like locationRestriction and region for powerful, targeted searches.

Full Code Example

Here's a complete implementation of type-specific search. Customise the available types based on your application's requirements.

<script lang="ts">
	import { PlaceAutocomplete } from 'places-autocomplete-svelte';
	import type { PlaceResult } from 'places-autocomplete-svelte/interfaces';

	let selectedType = $state('restaurant');
	let componentKey = $state({});

	// Configure the search to only return specific place types
	let requestParams = $state({
		language: 'en-gb',
		region: 'GB',
		includedPrimaryTypes: [selectedType] // Restrict to selected type
	});

	const options = {
		placeholder: `Search for ${selectedType}s...`,
		clear_input: false
	};

	const onResponse = (response: PlaceResult) => {
		console.log('Selected place:', response);
		// response.types will contain the place type information
	};

	// When type changes, update params and reset component
	const handleTypeChange = () => {
		requestParams = {
			...requestParams,
			includedPrimaryTypes: [selectedType]
		};
		componentKey = {}; // Force re-initialisation
	};
</script>

<!-- Type selector -->
<select bind:value={selectedType} onchange={handleTypeChange}>
	<option value="restaurant">Restaurants</option>
	<option value="cafe">Cafés</option>
	<option value="hotel">Hotels</option>
	<option value="hospital">Hospitals</option>
	<!-- Add more types as needed -->
</select>

<!-- Component with type filtering -->
{#key componentKey}
	<PlaceAutocomplete
		{onResponse}
		{requestParams}
		{options}
	/>
{/key}