> [!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
[PlaceSearchElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceSearchElement)
is an HTML element that renders the results of a place search in a list. There
are two ways to configure the `gmp-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/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/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).
## 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`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceNearbySearchRequestElement)
class reference documentation for more details.
This example renders the Place Search element in response to a nearby search
with a user-selected place type. It also displays a
[PlaceDetailsCompactElement](https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-details.md.txt)
for the selected place.
[See the complete code example](https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-search.md.txt#complete-code-example-nearby)
To add the Place Search element to the map, add a
`gmp-place-search` element with a nested
`gmp-place-nearby-search-request` element to the HTML page.
```html
```
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
```
When the user selects a place type from the menu, the
`gmp-place-nearby-search-request` element is updated, and the Place
Search element displays the results, as shown in the following snippets.
Markers are added in the `addMarkers` helper function.
```javascript
// Add event listeners to the type select and place search elements.
typeSelect.addEventListener('change', () => {
searchPlaces();
});
placeSearch.addEventListener('gmp-select', (event) => {
const { place } = event;
markers.get(place.id)?.click();
});
placeSearch.addEventListener('gmp-load', () => {
void addMarkers();
});
searchPlaces();
}
```
```javascript
// 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];
}
}
```
### Complete code example
### JavaScript
```javascript
// Query selectors for various elements in the HTML file.
const map = document.querySelector('gmp-map');
const placeSearch = document.querySelector('gmp-place-search');
const placeSearchQuery = document.querySelector(
'gmp-place-nearby-search-request'
);
const placeDetails = document.querySelector('gmp-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;
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.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
Place Search Nearby with Google Maps
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/ui-kit-place-search-nearby/jsfiddle)
## 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`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceTextSearchRequestElement)
class reference documentation for more details.
This example renders the Place Search element in response to a user text
input. It also displays a
[PlaceDetailsCompactElement](https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-details.md.txt)
for the selected place.
[See the complete code example](https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-search.md.txt#complete-code-example-text)
To add the Place Search element to the map, add a
`gmp-place-search` element with a nested
`gmp-place-text-search-request` element to the HTML page.
```html
```
The `input` element allows the user to enter search text.
```html
```
When the user clicks the **Search** button, the search function is run, the
`gmp-place-text-search-request` element is updated, and the Place
Search element displays the results as shown in the following snippets.
Markers are added in the `addMarkers` helper function.
```javascript
// 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;
markers.get(place.id)?.click();
});
placeSearch.addEventListener('gmp-load', () => {
void addMarkers();
});
searchPlaces();
}
```
```javascript
// 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;
}
}
```
### Complete code example
### JavaScript
```javascript
// Query selectors for various elements in the HTML file.
const map = document.querySelector('gmp-map');
const placeSearch = document.querySelector('gmp-place-search');
const placeSearchQuery = document.querySelector(
'gmp-place-text-search-request'
);
const placeDetails = document.querySelector('gmp-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;
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.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
Place Text Search with Google Maps
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/ui-kit-place-search-text/jsfiddle)
## Configure the content
The snippets on this page use
[`gmp-place-all-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceAllContentElement)
to show all available content for each place in the results. To show a
standard set of content instead, use
[`gmp-place-standard-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceStandardContentElement).
To choose specific content, add a
`` element to the
`gmp-place-search` element, and put the content elements to show
for each place inside the template. Only the content elements that you
include are displayed, so include `gmp-place-name` to show each
place's name. To configure attribution, add a
`gmp-place-attribution` element as a direct child of
`gmp-place-search`, outside the template.
```html
```
See the
[Place Widget Content Customization](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt)
reference documentation for more information about all supported content
elements.
> [!WARNING]
> **Deprecated:** The [`gmp-place-content-config`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceContentConfigElement) element is deprecated. To choose specific content for the Place Search element, use a `` element instead.