Place Type Icons Example

This example demonstrates how to enable and display place type icons in autocomplete suggestions. Place type icons help users quickly identify the category of each place (🏪 Shopping, 🍽️ Dining, 🏨 Lodging, etc.) without reading the full description.

💡 Key Features

• • Visual categorization with icons (🏪 Shopping, 🍽️ Dining, 🏨 Lodging, etc.)
• • Automatically displays on the right side of each suggestion
• • Mutually exclusive with distance display

⚠️ Important Requirements

To display place type icons, you must:

1. Set show_place_type: true in options
2. Set distance: false (mutually exclusive)

Live Demo

Try searching for different types of places (restaurants, hotels, shops, parks, etc.) and notice the category icons displayed on the right side of each suggestion.

powered by

Code

Copy and paste the following code into your Svelte application. Make sure to replace ___YOUR_API_KEY___ with your actual Google Maps API key.

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

  // Response handler
  let onResponse = (response: any) => {
    console.log('Selected place:', response);
    console.log('Place type:', response.primaryType);
  };

  // Error handler
  let onError = (error: string) => {
    console.error('Error:', error);
  };


  // Enable place type icons
  const options: ComponentOptions = {
    placeholder: 'Search for restaurants, hotels, shops...',
    show_place_type: true,  // Enable place type display
    distance: false,        // Must be false (mutually exclusive)
    clear_input: true
  };
</script>

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