Advanced Place Search Element (preview)

The AdvancedPlaceSearchElement is an HTML element that renders the results of a place search in a list. There are two ways to configure the gmp-advanced-place-search element:

Both nearby search and text search offer the same advanced features, including customizing action buttons, filtering reviews and media, configuring Place attribution, and handling place selection and errors.

Search nearby request

Select a place type from the menu to see nearby search results for that place type.

The nearby search is primarily configured to search by place type and location, and results can be ranked by distance or by popularity using the rankPreference property. See the PlaceNearbySearchRequestElement class reference documentation for more details.

This example renders the Advanced Place Search element in response to a nearby search with a user-selected place type. It also displays a AdvancedPlaceDetailsCompactElement for the selected place.

To add the Advanced Place Search element to the map, add a gmp-advanced-place-search element with a nested gmp-place-nearby-search-request element to the HTML page. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

The select element allows the user to choose a place type from the menu. For simplicity, only three place types are listed: restaurant, cafe, and EV charging station. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

When the user selects a place type from the menu, the gmp-place-nearby-search-request element is updated, and the Advanced Place Search element displays the results.

Search by text request

Enter a search term in the input field and click the Search button to get a list of places that match the term.

The text search is primarily configured to search using a text query and location, and results can be refined by price level, rating, and whether they are currently open. Results can also be ranked by distance or by popularity using the rankPreference property. See the PlaceTextSearchRequestElement class reference documentation for more details.

This example renders the Advanced Place Search element in response to a user text input. It also displays a AdvancedPlaceDetailsCompactElement for the selected place.

To add the Advanced Place Search element to the map, add a gmp-advanced-place-search element with a nested gmp-place-text-search-request element to the HTML page. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

The input element allows the user to enter search text. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

When the user clicks the Search button, the search function is run, the gmp-place-text-search-request element is updated, and the Advanced Place Search element displays the results.

Advanced features

Customize action buttons

Add action buttons as children inside the <template slot="place-list-item"> element of the Advanced Place Search component. Use <gmp-place-link> for standard navigational connections, and explicitly specify the action attribute. You can optionally specify the slot attribute. Valid predefined actions are open-website, open-directions, open-map, and call. If the slot attribute is omitted, it defaults to action-main. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

Filter reviews and media

This code sample shows only media and reviews that mention "coffee".

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

Configure Place attribution

To configure visual attribution, add a <gmp-place-attribution> element to display overarching Maps API data attribution configurations, such as the source of a photo or review. It must be added as a direct sibling of the <template>. Attributions placed inside the <template> element will be ignored. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

Handle place selection and errors

When the selectable attribute is present, you can listen for the gmp-select event to retrieve the user's selected place. You can also listen for the gmp-error event to gracefully handle scenarios when place data fails to fetch. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});