> [!NOTE]
> **Select the right component for your use case:**
>
> - [Place Search Element](https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-search.md.txt) renders a list of places in response to a search query. It is billed in the [Essentials tier](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt#places-ui-kit-essentials).
> - [Advanced Place Search Element](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-search.md.txt) extends the Place Search Element, letting you configure action buttons and apply search and filtering options to reviews and media. It is billed in the [Pro tier](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt#places-ui-kit).


The
[AdvancedPlaceSearchElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#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:

- To search for places of a specific type in a given area, use [search nearby request](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-search.md.txt#search-nearby-request) to render search results using the [`PlaceNearbySearchRequestElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceNearbySearchRequestElement).
- To search for places in a given area based on a text query, use [search by text request](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-search.md.txt#search-by-text-request) to render search results using the [`PlaceTextSearchRequestElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceTextSearchRequestElement).


Both nearby search and text search offer the same
[advanced features](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-search.md.txt#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.
<iframe src="https://maps-docs-team.web.app/samples/ui-kit-advanced-place-search-nearby/dist/" allow="fullscreen; "></iframe>


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`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#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](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-details.md.txt)
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.

```html
<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="details-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>
```

### See a complete code example

### TypeScript

```typescript
// Query selectors for various elements in the HTML file.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeSearch = document.querySelector<
    HTMLElement & { places?: google.maps.places.Place[] }
>('gmp-advanced-place-search')!;
const placeSearchQuery = document.querySelector<
    HTMLElement & {
        locationRestriction?: {
            center: google.maps.LatLng | google.maps.LatLngLiteral;
            radius: number;
        };
        includedTypes?: string[];
    }
>('gmp-place-nearby-search-request')!;
const placeDetails = document.querySelector<HTMLElement>(
    'gmp-advanced-place-details-compact'
)!;
const placeRequest = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-place-details-place-request')!;
const typeSelect = document.querySelector<HTMLSelectElement>('.type-select')!;

// Global variables for the map, markers, and info window.
const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
let infoWindow: google.maps.InfoWindow;

// The init function is called when the page loads.
async function init(): Promise<void> {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the type select and place search elements.
    typeSelect.addEventListener('change', () => {
        searchPlaces();
    });

    placeSearch.addEventListener('gmp-select', (event: Event) => {
        const place = (event as Event & { place?: google.maps.places.Place })
            .place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the type select or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (typeSelect.value) {
        const center = map.center!;
        placeSearchQuery.locationRestriction = {
            center,
            radius: 50000, // 50km radius
        };
        placeSearchQuery.includedTypes = [typeSelect.value];
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) continue;
        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
            gmpClickable: true,
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addEventListener('gmp-click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();
```

### JavaScript

```javascript
// Query selectors for various elements in the HTML file.
const map = document.querySelector('gmp-map');
const placeSearch = document.querySelector('gmp-advanced-place-search');
const placeSearchQuery = document.querySelector(
    'gmp-place-nearby-search-request'
);
const placeDetails = document.querySelector(
    'gmp-advanced-place-details-compact'
);
const placeRequest = document.querySelector('gmp-place-details-place-request');
const typeSelect = document.querySelector('.type-select');

// Global variables for the map, markers, and info window.
const markers = new Map();
let infoWindow;

// The init function is called when the page loads.
async function init() {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the type select and place search elements.
    typeSelect.addEventListener('change', () => {
        searchPlaces();
    });

    placeSearch.addEventListener('gmp-select', (event) => {
        const place = event.place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the type select or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (typeSelect.value) {
        const center = map.center;
        placeSearchQuery.locationRestriction = {
            center,
            radius: 50000, // 50km radius
        };
        placeSearchQuery.includedTypes = [typeSelect.value];
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) continue;
        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
            gmpClickable: true,
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addEventListener('gmp-click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();
```

### CSS

```css
html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.list-container {
    display: flex;
    flex-direction: column;
}

gmp-place-search {
    width: 100%;
    margin: 0;
    border: none;
    color-scheme: light;
}
```

### HTML

```html
<!doctype html>
<html>
    <head>
        <title>Place Search Nearby with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>

        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
            </gmp-map>
            <div class="ui-panel">
                <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>
                <div class="list-container">
                    <gmp-advanced-place-search selectable>
                        <gmp-place-all-content></gmp-place-all-content>
                        <gmp-place-nearby-search-request
                            max-result-count="5"></gmp-place-nearby-search-request>
                    </gmp-advanced-place-search>
                </div>
            </div>
        </div>

        <!--
        The gmp-advanced-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
    -->
        <gmp-advanced-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>

            <gmp-place-media></gmp-place-media>
            <gmp-place-rating></gmp-place-rating>
            <gmp-place-price></gmp-place-price>
            <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
            <gmp-place-open-now-status></gmp-place-open-now-status>
            <gmp-place-attribution
                light-scheme-color="gray"
                dark-scheme-color="white"></gmp-place-attribution>
        </gmp-advanced-place-details-compact>

    </body>
</html>
```

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle)


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.

```html
<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.
<iframe src="https://maps-docs-team.web.app/samples/ui-kit-advanced-place-search-text/dist/" allow="fullscreen; "></iframe>


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`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#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](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-details.md.txt)
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.

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


The `input` element allows the user to enter search text.

```html
<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.

### See a complete code example

### TypeScript

```typescript
// Query selectors for various elements in the HTML file.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeSearch = document.querySelector<
    HTMLElement & { places?: google.maps.places.Place[] }
>('gmp-advanced-place-search')!;
const placeSearchQuery = document.querySelector<
    HTMLElement & {
        textQuery?: string;
        locationBias?: google.maps.LatLng | google.maps.LatLngLiteral;
    }
>('gmp-place-text-search-request')!;
const placeDetails = document.querySelector<HTMLElement>(
    'gmp-advanced-place-details-compact'
)!;
const placeRequest = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-place-details-place-request')!;
const queryInput = document.querySelector<HTMLInputElement>('.query-input')!;
const searchButton = document.querySelector<HTMLElement>('.search-button')!;

// Global variables for the map, markers, and info window.
const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
let infoWindow: google.maps.InfoWindow;

// The init function is called when the page loads.
async function init(): Promise<void> {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the query input and place search elements.
    searchButton.addEventListener('click', () => {
        searchPlaces();
    });
    queryInput.addEventListener('keydown', (event: KeyboardEvent) => {
        if (event.key === 'Enter') {
            searchPlaces();
        }
    });

    placeSearch.addEventListener('gmp-select', (event: Event) => {
        const place = (event as Event & { place?: google.maps.places.Place })
            .place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the query input or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (queryInput.value) {
        const center = map.center;
        if (center) {
            placeSearchQuery.locationBias = center;
        }
        // The textQuery property is required for the search element to load.
        // Any other configured properties will be ignored if textQuery is not set.
        placeSearchQuery.textQuery = queryInput.value;
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) {
            continue;
        }

        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
            gmpClickable: true,
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addEventListener('gmp-click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();
```

### JavaScript

```javascript
// Query selectors for various elements in the HTML file.
const map = document.querySelector('gmp-map');
const placeSearch = document.querySelector('gmp-advanced-place-search');
const placeSearchQuery = document.querySelector(
    'gmp-place-text-search-request'
);
const placeDetails = document.querySelector(
    'gmp-advanced-place-details-compact'
);
const placeRequest = document.querySelector('gmp-place-details-place-request');
const queryInput = document.querySelector('.query-input');
const searchButton = document.querySelector('.search-button');

// Global variables for the map, markers, and info window.
const markers = new Map();
let infoWindow;

// The init function is called when the page loads.
async function init() {
    // Import the necessary libraries from the Google Maps API.
    const [{ InfoWindow }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Create a new info window and set its content to the place details element.
    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
    infoWindow = new InfoWindow({
        content: placeDetails,
        ariaLabel: 'Place Details',
    });

    // Set the map options.
    map.innerMap.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Add event listeners to the query input and place search elements.
    searchButton.addEventListener('click', () => {
        searchPlaces();
    });
    queryInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            searchPlaces();
        }
    });

    placeSearch.addEventListener('gmp-select', (event) => {
        const place = event.place;
        if (place?.id) {
            markers.get(place.id)?.click();
        }
    });
    placeSearch.addEventListener('gmp-load', () => {
        void addMarkers();
    });

    searchPlaces();
}
// The searchPlaces function is called when the user changes the query input or when the page loads.
function searchPlaces() {
    // Close the info window and clear the markers.
    infoWindow.close();
    for (const marker of markers.values()) {
        marker.remove();
    }
    markers.clear();

    // Set the place search query and add an event listener to the place search element.
    if (queryInput.value) {
        const center = map.center;
        if (center) {
            placeSearchQuery.locationBias = center;
        }
        // The textQuery property is required for the search element to load.
        // Any other configured properties will be ignored if textQuery is not set.
        placeSearchQuery.textQuery = queryInput.value;
    }
}

// The addMarkers function is called when the place search element loads.
async function addMarkers() {
    // Import the necessary libraries from the Google Maps API.
    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('core'),
    ]);
    const bounds = new LatLngBounds();

    if (!placeSearch.places || placeSearch.places.length === 0) {
        return;
    }

    for (const place of placeSearch.places) {
        if (!place.location) {
            continue;
        }

        const marker = new AdvancedMarkerElement({
            map: map.innerMap,
            position: place.location,
            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
            gmpClickable: true,
        });

        markers.set(place.id, marker);
        bounds.extend(place.location);

        marker.addEventListener('gmp-click', () => {
            placeRequest.place = place;
            infoWindow.open(map.innerMap, marker);
        });
    }

    map.innerMap.fitBounds(bounds);
}

void init();
```

### CSS

```css
html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.list-container {
    display: flex;
    flex-direction: column;
}

gmp-place-search {
    width: 100%;
    margin: 0;
    border: none;
    color-scheme: light;
}

.query-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.search-button {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background-color: #1a73e8;
    color: white;
    border: none;
    cursor: pointer;
}

.search-button:hover,
.search-button:focus-visible {
    background-color: #1765cc;
}
```

### HTML

```html
<!doctype html>
<html>
    <head>
        <title>Place Text Search with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>

        <div class="container">
            <div class="ui-panel">
                <div class="controls">
                    <input
                        type="text"
                        id="query-input"
                        class="query-input"
                        placeholder="Search for a place"
                        value="cafe" />
                    <button class="search-button">Search</button>
                </div>
                <div class="list-container">
                    <gmp-advanced-place-search selectable>
                        <gmp-place-all-content></gmp-place-all-content>
                        <gmp-place-text-search-request
                            max-result-count="5"></gmp-place-text-search-request>
                    </gmp-advanced-place-search>
                </div>
            </div>
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
            </gmp-map>
        </div>

        <!--
        The gmp-advanced-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-advanced-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <gmp-place-media></gmp-place-media>
            <gmp-place-rating></gmp-place-rating>
            <gmp-place-price></gmp-place-price>
            <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
            <gmp-place-open-now-status></gmp-place-open-now-status>
            <gmp-place-attribution
                light-scheme-color="gray"
                dark-scheme-color="white"></gmp-place-attribution>
        </gmp-advanced-place-details-compact>

    </body>
</html>
```

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/ui-kit-advanced-place-search-text/jsfiddle)

## Advanced features

### Customize action buttons


Add action buttons as children inside the
`<template slot="details-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`.

```html
<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="details-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".

```html
<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="details-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.

```html
<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="details-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.

```javascript
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);
});
```