Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Places Widgets

BasicPlaceAutocompleteElementclass

google.maps.places.BasicPlaceAutocompleteElementclass

BasicPlaceAutocompleteElement is anHTMLElement subclass which provides a UI component for the Places Autocomplete API.

Custom element:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>

This class extendsHTMLElement.

This class implementsBasicPlaceAutocompleteElementOptions.

Access by callingconst {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`BasicPlaceAutocompleteElement`	`BasicPlaceAutocompleteElement(options)` Parameters: `options`: `BasicPlaceAutocompleteElementOptions`

Properties
`includedPrimaryTypes`	Type: `Array<string>optional` Included primaryPlace type (for example, "restaurant" or "gas_station"). A Place is only returned if its primary type is included in this list. Up to 5 values can be specified. If no types are specified, all Place types are returned. HTML attribute: `<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-basic-place-autocomplete>`
`includedRegionCodes`	Type: `Array<string>optional` Only include results in the specified regions, specified as up to 15 CLDR two-character region codes. An empty set will not restrict the results. If both`locationRestriction` and`includedRegionCodes` are set, the results will be located in the area of intersection. HTML attribute: `<gmp-basic-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-basic-place-autocomplete>`
`locationBias`	Type: `LocationBiasoptional` A soft boundary or hint to use when searching for places.
`locationRestriction`	Type: `LocationRestrictionoptional` Bounds to constrain search results.
`name`	Type: `stringoptional` The name to be used for the input element. Seehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name for details. Follows the same behavior as the name attribute for inputs. Note that this is the name that will be used when a form is submitted. Seehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/form for details. HTML attribute: `<gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>`
`origin`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` The origin from which to calculate distance. If not specified, distance is not calculated. The altitude, if given, is not used in the calculation. HTML attribute: `<gmp-basic-place-autocomplete origin="lat,lng"></gmp-basic-place-autocomplete>` `<gmp-basic-place-autocomplete origin="lat,lng,altitude"></gmp-basic-place-autocomplete>`
`requestedLanguage`	Type: `stringoptional` A language identifier for the language in which the results should be returned, if possible. Results in the selected language may be given a higher ranking, but suggestions are not restricted to this language. See thelist of supported languages. HTML attribute: `<gmp-basic-place-autocomplete requested-language="string"></gmp-basic-place-autocomplete>`
`requestedRegion`	Type: `stringoptional` A region code which is used for result formatting and for result filtering. It does not restrict the suggestions to this country. The region code accepts accTLD ("top-level domain") two-character value. Most ccTLD codes are identical to ISO 3166-1 codes, with some notable exceptions. For example, the United Kingdom's ccTLD is "uk" (`.co.uk`) while its ISO 3166-1 code is "gb" (technically for the entity of "The United Kingdom of Great Britain and Northern Ireland"). HTML attribute: `<gmp-basic-place-autocomplete requested-region="string"></gmp-basic-place-autocomplete>`
`unitSystem`	Type: `UnitSystemoptional` The unit system used to display distances. If not specified, the unit system is determined by requestedRegion. HTML attribute: `<gmp-basic-place-autocomplete unit-system="metric"></gmp-basic-place-autocomplete>` `<gmp-basic-place-autocomplete unit-system="imperial"></gmp-basic-place-autocomplete>`

Slots
`prediction-item-icon`	This slot accepts exactly one`<template>` element to render as the icon shown next to the prediction item.

Parts
`prediction-item`	An item in the drop down of predictions that represents a single prediction.
`prediction-item-icon`	The icon displayed to the left of each item in the list of predictions.
`prediction-item-main-text`	A part of prediction-item that is the main text of the prediction. For geographic locations, this contains a place name, like 'Sydney', or a street name and number, like '10 King Street'. By default, the prediction-item-main-text is colored black. If there is any additional text in the prediction-item, it is outside prediction-item-main-text and inherits its styling from prediction-item. It is colored gray by default. The additional text is typically an address.
`prediction-item-match`	The part of the returned prediction that matches the user’s input. By default, this matched text is highlighted in bold text. Note that the matched text may be anywhere within prediction-item. It is not necessarily part of prediction-item-main-text.
`prediction-item-selected`	The item when the user navigates to it via the keyboard. Note: Selected items will be affected by both this part styles and also the prediction-item part styles.
`prediction-list`	The visual element containing the list of predictions returned by the Place Autocomplete service. This list appears as a dropdown list below the PlaceAutocompleteElement.

CSS Properties
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See`color-scheme`documentation for more details. Defaults to`color-scheme: light dark`.

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`gmp-error`	`function(errorEvent)` Arguments: `errorEvent`: `Event` This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
`gmp-select`	`function(placeSelectEvent)` Arguments: `placeSelectEvent`: `PlaceSelectEvent` This event is fired when a user selects a place prediction. Contains a Place object.

BasicPlaceAutocompleteElementOptionsinterface

google.maps.places.BasicPlaceAutocompleteElementOptionsinterface

Options for constructing a BasicPlaceAutocompleteElement.

Properties
`includedPrimaryTypesoptional`	Type: `Array<string>optional`
`includedRegionCodesoptional`	Type: `Array<string>optional`
`locationBiasoptional`	Type: `LocationBiasoptional`
`locationRestrictionoptional`	Type: `LocationRestrictionoptional`
`nameoptional`	Type: `stringoptional`
`originoptional`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional`
`requestedLanguageoptional`	Type: `stringoptional`
`requestedRegionoptional`	Type: `stringoptional`
`unitSystemoptional`	Type: `UnitSystemoptional`

PlaceAutocompleteElementclass

google.maps.places.PlaceAutocompleteElementclass

PlaceAutocompleteElement is anHTMLElement subclass which provides a UI component for the Places Autocomplete API.

PlaceAutocompleteElement automatically usesAutocompleteSessionTokens internally to group the query and selection phases of a user's autocomplete search.

The first call toPlace.fetchFields on aPlace returned byPlacePrediction.toPlace will automatically include the session token used to fetch thePlacePrediction.

Seehttps://developers.google.com/maps/documentation/places/web-service/place-session-tokens for more details on how sessions work.

Custom element:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

This class extendsHTMLElement.

This class implementsPlaceAutocompleteElementOptions.

Access by callingconst {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceAutocompleteElement`	`PlaceAutocompleteElement(options)` Parameters: `options`: `PlaceAutocompleteElementOptions`

Properties
`includedPrimaryTypes`	Type: `Array<string>optional` Included primaryPlace type (for example, "restaurant" or "gas_station"). A Place is only returned if its primary type is included in this list. Up to 5 values can be specified. If no types are specified, all Place types are returned. HTML attribute: `<gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>`
`includedRegionCodes`	Type: `Array<string>optional` Only include results in the specified regions, specified as up to 15 CLDR two-character region codes. An empty set will not restrict the results. If both`locationRestriction` and`includedRegionCodes` are set, the results will be located in the area of intersection. HTML attribute: `<gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>`
`locationBias`	Type: `LocationBiasoptional` A soft boundary or hint to use when searching for places.
`locationRestriction`	Type: `LocationRestrictionoptional` Bounds to constrain search results.
`name`	Type: `stringoptional` The name to be used for the input element. Seehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name for details. Follows the same behavior as the name attribute for inputs. Note that this is the name that will be used when a form is submitted. Seehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/form for details. HTML attribute: `<gmp-place-autocomplete name="string"></gmp-place-autocomplete>`
`origin`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` The origin from which to calculate distance. If not specified, distance is not calculated. The altitude, if given, is not used in the calculation. HTML attribute: `<gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>` `<gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>`
`requestedLanguage`	Type: `stringoptional` A language identifier for the language in which the results should be returned, if possible. Results in the selected language may be given a higher ranking, but suggestions are not restricted to this language. See thelist of supported languages. HTML attribute: `<gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>`
`requestedRegion`	Type: `stringoptional` A region code which is used for result formatting and for result filtering. It does not restrict the suggestions to this country. The region code accepts accTLD ("top-level domain") two-character value. Most ccTLD codes are identical to ISO 3166-1 codes, with some notable exceptions. For example, the United Kingdom's ccTLD is "uk" (`.co.uk`) while its ISO 3166-1 code is "gb" (technically for the entity of "The United Kingdom of Great Britain and Northern Ireland"). HTML attribute: `<gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>`
`unitSystem`	Type: `UnitSystemoptional` The unit system used to display distances. If not specified, the unit system is determined by requestedRegion. HTML attribute: `<gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>` `<gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>`

Slots
`prediction-item-icon`	This slot accepts exactly one`<template>` element to render as the icon shown next to the prediction item.

Parts
`prediction-item`	An item in the drop down of predictions that represents a single prediction.
`prediction-item-icon`	The icon displayed to the left of each item in the list of predictions.
`prediction-item-main-text`	A part of prediction-item that is the main text of the prediction. For geographic locations, this contains a place name, like 'Sydney', or a street name and number, like '10 King Street'. By default, the prediction-item-main-text is colored black. If there is any additional text in the prediction-item, it is outside prediction-item-main-text and inherits its styling from prediction-item. It is colored gray by default. The additional text is typically an address.
`prediction-item-match`	The part of the returned prediction that matches the user’s input. By default, this matched text is highlighted in bold text. Note that the matched text may be anywhere within prediction-item. It is not necessarily part of prediction-item-main-text.
`prediction-item-selected`	The item when the user navigates to it via the keyboard. Note: Selected items will be affected by both this part styles and also the prediction-item part styles.
`prediction-list`	The visual element containing the list of predictions returned by the Place Autocomplete service. This list appears as a dropdown list below the PlaceAutocompleteElement.

CSS Properties
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See`color-scheme`documentation for more details. Defaults to`color-scheme: light dark`.

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`gmp-error`	`function(errorEvent)` Arguments: `errorEvent`: `Event` This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
`gmp-select`	`function(placePredictionSelectEvent)` Arguments: `placePredictionSelectEvent`: `PlacePredictionSelectEvent` This event is fired when a user selects a place prediction. Contains a PlacePrediction object which can be converted to a Place object.

PlaceAutocompleteElementOptionsinterface

google.maps.places.PlaceAutocompleteElementOptionsinterface

Options for constructing a PlaceAutocompleteElement. For the description of each property, refer to the property of the same name in the PlaceAutocompleteElement class.

Properties
`includedPrimaryTypesoptional`	Type: `Array<string>optional`
`includedRegionCodesoptional`	Type: `Array<string>optional`
`locationBiasoptional`	Type: `LocationBiasoptional`
`locationRestrictionoptional`	Type: `LocationRestrictionoptional`
`nameoptional`	Type: `stringoptional`
`originoptional`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional`
`requestedLanguageoptional`	Type: `stringoptional`
`requestedRegionoptional`	Type: `stringoptional`
`unitSystemoptional`	Type: `UnitSystemoptional`

PlacePredictionSelectEventclass

google.maps.places.PlacePredictionSelectEventclass

This event is created after the user selects a prediction item with the PlaceAutocompleteElement. Access the selection withevent.placePrediction.

Convert placePrediction to aPlace by callingPlacePrediction.toPlace.

This class extendsEvent.

Access by callingconst {PlacePredictionSelectEvent} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Properties
`placePrediction`	Type: `PlacePrediction` Convert this to a`Place` by calling`PlacePrediction.toPlace`.

PlaceContextualElementclass

google.maps.places.PlaceContextualElementclass

Notice: Available only in the v=alpha channel.

A widget that uses the context token to display a contextual view of the Grounding with Google Maps response.

Custom element:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

This class extendsHTMLElement.

This class implementsPlaceContextualElementOptions.

Access by callingconst {PlaceContextualElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceContextualElement`	`PlaceContextualElement([options])` Parameters: `options`: `PlaceContextualElementOptionsoptional`

Properties
`contextToken`	Type: `stringoptional` The context token. HTML attribute: `<gmp-place-contextual context-token="string"></gmp-place-contextual>`

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

PlaceContextualElementOptionsinterface

google.maps.places.PlaceContextualElementOptionsinterface

Notice: Available only in the v=alpha channel.

Options forPlaceContextualElement.

Properties
`contextTokenoptional`	Type: `stringoptional` The context token provided by the Grounding with Google Maps response.

PlaceContextualListConfigElementclass

google.maps.places.PlaceContextualListConfigElementclass

Notice: Available only in the v=alpha channel.

An HTML element that configures options for the Place Contextual Element's list view.

Custom element:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

This class extendsHTMLElement.

This class implementsPlaceContextualListConfigElementOptions.

Access by callingconst {PlaceContextualListConfigElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceContextualListConfigElement`	`PlaceContextualListConfigElement([options])` Parameters: `options`: `PlaceContextualListConfigElementOptionsoptional`

Properties
`layout`	Type: `PlaceContextualListLayoutoptional` The layout. HTML attribute: `<gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>` `<gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>`
`mapHidden`	Type: `booleanoptional` Whether the map is hidden. HTML attribute: `<gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>`

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

PlaceContextualListConfigElementOptionsinterface

google.maps.places.PlaceContextualListConfigElementOptionsinterface

Notice: Available only in the v=alpha channel.

Options for PlaceContextualListConfigElement.

Properties
`layoutoptional`	Type: `PlaceContextualListLayoutoptional` Default:`PlaceContextualListLayout.VERTICAL` The layout.
`mapHiddenoptional`	Type: `booleanoptional` Default:`false` True if the map should be hidden.

PlaceContextualListLayoutconstants

google.maps.places.PlaceContextualListLayoutconstants

Notice: Available only in the v=alpha channel.

The list of layouts that the Place Contextual Element supports for the list view.

Access by callingconst {PlaceContextualListLayout} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constants
`COMPACT`	Compact list layout: list items are rendered as links across a single line, with overflows in a dropdown list.
`VERTICAL`	Vertical list layout: list items are rendered as cards in a vertical list.

PlaceDetailsElementclass

google.maps.places.PlaceDetailsElementclass

Displays details for a place in a full layout. Append either aPlaceDetailsPlaceRequestElement orPlaceDetailsLocationRequestElement to specify the place to be rendered. Append aPlaceContentConfigElement,PlaceStandardContentElement, orPlaceAllContentElement to specify which content to render.

Example:

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details>

To use this element, enable thePlaces UI Kit API for your project in the Google Cloud console.

Custom element:
<gmp-place-details></gmp-place-details>

This class extendsHTMLElement.

This class implementsPlaceDetailsElementOptions.

Access by callingconst {PlaceDetailsElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceDetailsElement`	`PlaceDetailsElement([options])` Parameters: `options`: `PlaceDetailsElementOptionsoptional`

Properties
`place`	Type: `Placeoptional` Read only. Place object containing the ID, location, and viewport of the currently rendered place.

CSS Properties
`--gmp-button-border-color`	Border color of the "Open in Maps" button.
`--gmp-button-border-radius`	Border radius of the "Open in Maps" button.
`--gmp-button-border-width`	Border width of the "Open in Maps" button.
`--gmp-collage-border-radius-outer`	Border radius of the outer corners of the media collage.
`--gmp-dialog-border-radius`	Border radius of the Google Maps disclosure dialog.
`--gmp-mat-color-disabled-surface`	Surface color intended to convey disabled states or non-presence. Used for empty review stars.
`--gmp-mat-color-info`	Color of UI elements with informational sentiment. Used for the wheelchair icon.
`--gmp-mat-color-negative`	Color of UI elements with negative sentiment. Used for "Closed" text in open now status.
`--gmp-mat-color-neutral-container`	Container color for neutral filled UI elements. Used for image placeholders and review published date badge.
`--gmp-mat-color-on-neutral-container`	Color of text and icons against the neutral container color. Used for the review published date badge and EV charger availability badge when unavailable.
`--gmp-mat-color-on-positive-container`	Color of texts and icons against the positive container color. Used for the EV charger availability badge when available.
`--gmp-mat-color-on-secondary-container`	Color of text and icons against the secondary container color. Used for text and icons on the "Open in Maps" button.
`--gmp-mat-color-on-surface`	Color for text and icons against any surface color. Used for regular text.
`--gmp-mat-color-on-surface-variant`	Lower-emphasis color for text and icons against any surface color. Used for less emphasized text.
`--gmp-mat-color-outline-decorative`	Outline color of non-interactive elements. Used for the element's border.
`--gmp-mat-color-positive`	Color of UI elements with positive sentiment. Used for "Open" text in open now status.
`--gmp-mat-color-positive-container`	Container color for UI elements that convey positive sentiment. Used for the EV charger availability badge when available.
`--gmp-mat-color-primary`	Color of interactive text and icons against the surface color. Used for review count, links in the Google Maps disclosures dialog, website link, icons in the overview tab, and (hover / focus / text color) on tab bar titles.
`--gmp-mat-color-secondary-container`	Less prominent fill color against surface, for recessive components like tonal buttons. Used for the background of the "Open in Maps" button.
`--gmp-mat-color-surface`	Color for backgrounds. Used for the backgrounds of the element and the Google Maps disclosures dialog.
`--gmp-mat-font-body-medium`	Used for the place address, rating, type, price, open now status, opening hours, review, phone number, website, plus code, top features, and body text in the Google Maps disclosures dialog.
`--gmp-mat-font-body-small`	Used for body text in the features list in the 'About' tab.
`--gmp-mat-font-display-small`	Used for the place name and the text for each feature heading in the 'About' tab.
`--gmp-mat-font-family`	Base font family used for all text.
`--gmp-mat-font-headline-medium`	Used for heading text in the Google Maps disclosures dialog.
`--gmp-mat-font-label-large`	Used for the tab titles, the "Open in Maps" button, reviewer attribution text in the photo gallery, reviewer attribution text in the reviews section, and links in the Google Maps disclosures dialog.
`--gmp-mat-font-label-medium`	Used for the photos count badge and the review published date bage.
`--gmp-mat-font-title-small`	Used for the title of each section in the 'About' tab.
`--gmp-mat-spacing-extra-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-extra-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-medium`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-two-extra-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-star-rating-color`	Color of the filled stars in the rating.
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See`color-scheme`documentation for more details. Defaults to`color-scheme: light dark`.
`font-size`	Scales all text and icons in the element, which are defined internally in ems. Defaults to`16px`.

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`gmp-error`	`function(event)` Arguments: `event`: `Event` This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
`gmp-load`	`function(event)` Arguments: `event`: `Event` This event is fired when the element loads and renders its content. This event does not bubble.

PlaceDetailsElementOptionsinterface

google.maps.places.PlaceDetailsElementOptionsinterface

Options forPlaceDetailsElement.

PlaceDetailsCompactElementclass

google.maps.places.PlaceDetailsCompactElementclass

Displays details for a place in a compact layout. Append aPlaceDetailsPlaceRequestElement orPlaceDetailsLocationRequestElement to specify the place to be rendered. Append aPlaceContentConfigElement,PlaceStandardContentElement, orPlaceAllContentElement to specify which content to render.

Example:

 <gmp-place-details-compact>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details-compact>

To use this element, enable thePlaces UI Kit API for your project in the Google Cloud console.

Custom element:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>

This class extendsHTMLElement.

This class implementsPlaceDetailsCompactElementOptions.

Access by callingconst {PlaceDetailsCompactElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceDetailsCompactElement`	`PlaceDetailsCompactElement([options])` Parameters: `options`: `PlaceDetailsCompactElementOptionsoptional`

Properties
`orientation`	Type: `PlaceDetailsOrientationoptional` Default:`PlaceDetailsOrientation.VERTICAL` The orientation variant (vertical or horizontal) of the element. HTML attribute: `<gmp-place-details-compact orientation="vertical"></gmp-place-details-compact>` `<gmp-place-details-compact orientation="horizontal"></gmp-place-details-compact>`
`place`	Type: `Placeoptional` Read only. Place object containing the ID, location, and viewport of the currently rendered place.
`truncationPreferred`	Type: `boolean` Default:`false` If true, truncates the place name and address to fit on one line instead of wrapping. HTML attribute: `<gmp-place-details-compact truncation-preferred></gmp-place-details-compact>`

CSS Properties
`--gmp-button-border-color`	Border color of the "Open in Maps" button.
`--gmp-button-border-radius`	Border radius of the "Open in Maps" button.
`--gmp-button-border-width`	Border width of the "Open in Maps" button.
`--gmp-dialog-border-radius`	Border radius of the Google Maps disclosure dialog.
`--gmp-mat-color-info`	Color of UI elements with informational sentiment. Used for the wheelchair icon.
`--gmp-mat-color-negative`	Color of UI elements with negative sentiment. Used for "Closed" text in open now status.
`--gmp-mat-color-neutral-container`	Container color for neutral filled UI elements. Used for image placeholders.
`--gmp-mat-color-on-secondary-container`	Color of text and icons against the secondary container color. Used for text and icons on the "Open in Maps" button.
`--gmp-mat-color-on-surface`	Color for text and icons against any surface color. Used for regular text.
`--gmp-mat-color-on-surface-variant`	Lower-emphasis color for text and icons against any surface color. Used for less emphasized text.
`--gmp-mat-color-outline-decorative`	Outline color of non-interactive elements. Used for the element's border.
`--gmp-mat-color-positive`	Color of UI elements with positive sentiment. Used for "Open" text in open now status.
`--gmp-mat-color-primary`	Color of interactive text and icons against the surface color. Used for review count, as well as links in the Google Maps disclosures dialog.
`--gmp-mat-color-secondary-container`	Less prominent fill color against surface, for recessive components like tonal buttons. Used for the background of the "Open in Maps" button.
`--gmp-mat-color-surface`	Color for backgrounds. Used for the backgrounds of the element and the Google Maps disclosures dialog.
`--gmp-mat-font-body-medium`	Used for body text in the Google Maps disclosures dialog.
`--gmp-mat-font-body-small`	Used for the place address, rating, type, price, and open now status.
`--gmp-mat-font-family`	Base font family used for all text.
`--gmp-mat-font-headline-medium`	Used for heading text in the Google Maps disclosures dialog.
`--gmp-mat-font-label-large`	Used for the "Open in Maps" button as well as links in the Google Maps disclosures dialog and reviewer attribution text in the photo gallery.
`--gmp-mat-font-label-medium`	Used for the photos count badge.
`--gmp-mat-font-title-small`	Used for the place name.
`--gmp-mat-spacing-extra-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-medium`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-star-rating-color`	Color of the filled stars in the rating.
`--gmp-thumbnail-border-radius`	Border radius of the place thumbnail image.
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See`color-scheme`documentation for more details. Defaults to`color-scheme: light dark`.
`font-size`	Scales all text and icons in the element, which are defined internally in ems. Defaults to`16px`.

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`gmp-error`	`function(event)` Arguments: `event`: `Event` This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
`gmp-load`	`function(event)` Arguments: `event`: `Event` This event is fired when the element loads and renders its content. This event does not bubble.

PlaceDetailsCompactElementOptionsinterface

google.maps.places.PlaceDetailsCompactElementOptionsinterface

Options forPlaceDetailsCompactElement.

Properties
`orientationoptional`	Type: `PlaceDetailsOrientationoptional` See`PlaceDetailsCompactElement.orientation`.
`truncationPreferredoptional`	Type: `booleanoptional` See`PlaceDetailsCompactElement.truncationPreferred`.

PlaceDetailsOrientationconstants

google.maps.places.PlaceDetailsOrientationconstants

Orientation variants forPlaceDetailsCompactElement.

Access by callingconst {PlaceDetailsOrientation} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constants
`HORIZONTAL`	Horizontal orientation.
`VERTICAL`	Vertical orientation.

PlaceDetailsPlaceRequestElementclass

google.maps.places.PlaceDetailsPlaceRequestElementclass

Configures aPlaceDetailsCompactElement orPlaceDetailsElement to load data based on a place object, ID, or resource name. Append this element as a child of aPlaceDetailsCompactElement orPlaceDetailsElement to load data for the specified place. For example:

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
 </gmp-place-details>

Custom element:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>

This class extendsHTMLElement.

This class implementsPlaceDetailsPlaceRequestElementOptions.

Access by callingconst {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceDetailsPlaceRequestElement`	`PlaceDetailsPlaceRequestElement([options])` Parameters: `options`: `PlaceDetailsPlaceRequestElementOptionsoptional`

Properties
`place`	Type: `Placeoptional` Default:`null` The place object, ID, or resource name to render details for in the Place Details Compact element. This property reflects to the attribute as a resource name. HTML attribute: `<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>`

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

PlaceDetailsPlaceRequestElementOptionsinterface

google.maps.places.PlaceDetailsPlaceRequestElementOptionsinterface

Options forPlaceDetailsPlaceRequestElement.

Properties
`placeoptional`	Type: `Place\|stringoptional` See`PlaceDetailsPlaceRequestElement.place`

PlaceDetailsLocationRequestElementclass

google.maps.places.PlaceDetailsLocationRequestElementclass

Configures aPlaceDetailsCompactElement orPlaceDetailsElement to load data based on a location. Append this element as a child of aPlaceDetailsCompactElement orPlaceDetailsElement to load data for the specified location. For example:

 <gmp-place-details>
   <gmp-place-details-location-request
     location="37.6207665,-122.4284806"
   ></gmp-place-details-location-request>
 </gmp-place-details>

Custom element:
<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>

This class extendsHTMLElement.

This class implementsPlaceDetailsLocationRequestElementOptions.

Access by callingconst {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceDetailsLocationRequestElement`	`PlaceDetailsLocationRequestElement([options])` Parameters: `options`: `PlaceDetailsLocationRequestElementOptionsoptional`

Properties
`location`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` Default:`null` The location to render details for in the Place Details element. Normalizes to a`LatLngAltitude`. HTML attribute: `<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>`

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

PlaceDetailsLocationRequestElementOptionsinterface

google.maps.places.PlaceDetailsLocationRequestElementOptionsinterface

Options forPlaceDetailsLocationRequestElement.

Properties
`locationoptional`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` The location to render the place for.

PlaceSearchElementclass

google.maps.places.PlaceSearchElementclass

Displays the results of a place search in a list. Append aPlaceTextSearchRequestElement orPlaceNearbySearchRequestElement to specify the request to render results for. Append aPlaceContentConfigElement,PlaceStandardContentElement, orPlaceAllContentElement to specify which content to render.

Example:

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

To use the Place Search Element, enable thePlaces UI Kit API for your project in the Google Cloud console.

Custom element:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>

This class extendsHTMLElement.

This class implementsPlaceSearchElementOptions.

Access by callingconst {PlaceSearchElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceSearchElement`	`PlaceSearchElement([options])` Parameters: `options`: `PlaceSearchElementOptionsoptional`

Properties
`attributionPosition`	Type: `PlaceSearchAttributionPositionoptional` Default:`PlaceSearchAttributionPosition.TOP` The position of the attribution logo and legal disclosure button. HTML attribute: `<gmp-place-search attribution-position="top"></gmp-place-search>` `<gmp-place-search attribution-position="bottom"></gmp-place-search>`
`orientation`	Type: `PlaceSearchOrientationoptional` Default:`PlaceSearchOrientation.VERTICAL` The orientation variant (vertical or horizontal) of the element. HTML attribute: `<gmp-place-search orientation="vertical"></gmp-place-search>` `<gmp-place-search orientation="horizontal"></gmp-place-search>`
`places`	Type: `Array<Place>` Read only. Array of`Place` objects containing the IDs, locations, and viewports of the currently rendered places.
`selectable`	Type: `booleanoptional` Default:`false` Whether or not the list items are selectable. If true, the list items will be buttons that dispatch the`gmp-select` event when clicked. Accessible keyboard navigation and selection is also supported. HTML attribute: `<gmp-place-search selectable></gmp-place-search>`
`truncationPreferred`	Type: `booleanoptional` Default:`false` If true, truncates certain lines of content to fit on one line instead of wrapping. HTML attribute: `<gmp-place-search truncation-preferred></gmp-place-search>`

CSS Properties
`--gmp-button-border-color`	Border color for "Open in Maps" button.
`--gmp-button-border-radius`	Border radius for "Open in Maps" button.
`--gmp-button-border-width`	Border width for "Open in Maps" button.
`--gmp-card-border-radius`	Border radius for place cards.
`--gmp-dialog-border-radius`	Border radius for the Google Maps disclosure dialog.
`--gmp-mat-color-info`	Color of UI elements with informational sentiment. Used for the accessible entrance icon.
`--gmp-mat-color-negative`	Color of UI elements with negative sentiment. Used for the "Closed" label for a place's opening hours.
`--gmp-mat-color-neutral-container`	Container color for neutral filled UI elements. Used for review date badges and loading placeholder shapes.
`--gmp-mat-color-on-neutral-container`	Color of text and icons on a neutral container. Used for review date text and loading error text.
`--gmp-mat-color-on-secondary-container`	Color of text and icons against a secondary container color. Used for button text and icons.
`--gmp-mat-color-on-surface`	Color for text and icons against a surface color. Used for headings and dialog content.
`--gmp-mat-color-on-surface-variant`	Lower-emphasis color for text and icons against a surface color. Used for place information.
`--gmp-mat-color-outline-decorative`	Outline color of non-interactive elements. Used for the container border.
`--gmp-mat-color-positive`	Color of UI elements with positive sentiment. Used for the "Open" label for a place's opening hours.
`--gmp-mat-color-primary`	Color of interactive text and icons against the surface color. Used for links, loading indicator, and overview icons.
`--gmp-mat-color-secondary-container`	Less prominent fill color against a surface. Used for button backgrounds.
`--gmp-mat-color-surface`	Color for backgrounds. Used for container and dialog backgrounds.
`--gmp-mat-font-body-small`	Used for place information.
`--gmp-mat-font-family`	Base font family for all text.
`--gmp-mat-font-headline-medium`	Used for dialog headings.
`--gmp-mat-font-label-large`	Used for button content.
`--gmp-mat-font-title-medium`	Used for the place name.
`--gmp-mat-spacing-extra-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-medium`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-star-rating-color`	Color of filled stars in a star rating.
`--gmp-thumbnail-border-radius`	Border radius for the place thumbnail image.
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See`color-scheme`documentation for more details. Defaults to`color-scheme: light dark`.
`font-size`	Scales all text and icons in the element. Defaults to`16px`.

Methods
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptionsoptional` Seeoptions. Custom events only support`capture` and`passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`gmp-error`	`function(event)` Arguments: `event`: `Event` This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
`gmp-load`	`function(event)` Arguments: `event`: `Event` This event is fired when the element loads and renders its content. This event does not bubble.
`gmp-select`	`function(event)` Arguments: `event`: `PlaceSelectEvent` This event is fired when a place is selected from the list. Contains a`Place` object containing the ID, location, and viewport of the selected place.

PlaceSearchElementOptionsinterface

google.maps.places.PlaceSearchElementOptionsinterface

Options forPlaceSearchElement.

Properties
`attributionPositionoptional`	Type: `PlaceSearchAttributionPositionoptional` See`PlaceSearchElement.attributionPosition`.
`orientationoptional`	Type: `PlaceSearchOrientationoptional` See`PlaceSearchElement.orientation`.
`selectableoptional`	Type: `booleanoptional` See`PlaceSearchElement.selectable`
`truncationPreferredoptional`	Type: `booleanoptional` See`PlaceSearchElement.truncationPreferred`.

PlaceSearchAttributionPositionconstants

google.maps.places.PlaceSearchAttributionPositionconstants

Attribution positions forPlaceSearchElement.

Access by callingconst {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constants
`BOTTOM`	Attribution at the bottom of the PlaceSearchElement
`TOP`	Attribution at the top of the PlaceSearchElement

PlaceSearchOrientationconstants

google.maps.places.PlaceSearchOrientationconstants

Orientation variants forPlaceSearchElement.

Access by callingconst {PlaceSearchOrientation} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constants
`HORIZONTAL`	Horizontal orientation.
`VERTICAL`	Vertical orientation.

PlaceSelectEventclass

google.maps.places.PlaceSelectEventclass

This event fires when a place is selected from a list of places. Access the selection withevent.place.

This class extendsEvent.

Access by callingconst {PlaceSelectEvent} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Properties
`place`	Type: `Place` The selected place.

PlaceNearbySearchRequestElementclass

google.maps.places.PlaceNearbySearchRequestElementclass

Configures aPlaceSearchElement to load results based on a nearby search request. ThelocationRestriction property is required for the search element to load. Any other configured properties will be ignored iflocationRestriction is not set. Append this element as a child of aPlaceSearchElement to load results. For example:

 <gmp-place-search>
   <gmp-place-nearby-search-request
     location-restriction="RADIUS@LAT,LNG"
   ></gmp-place-nearby-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

Custom element:
<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." excluded-types="excluded-type1 excluded-type2..." included-primary-types="included-primary-type1 included-primary-type2..." included-types="included-type1 included-type2..." location-restriction="radius@lat,lng" max-result-count="number" rank-preference="preference"></gmp-place-nearby-search-request>

This class extendsHTMLElement.

This class implementsPlaceNearbySearchRequestElementOptions.

Access by callingconst {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceNearbySearchRequestElement`	`PlaceNearbySearchRequestElement([options])` Parameters: `options`: `PlaceNearbySearchRequestElementOptionsoptional`

Properties
`excludedPrimaryTypes`	Type: `Array<string>optional` Default:`null` Excluded primary place types. HTML attribute: `<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."></gmp-place-nearby-search-request>`
`excludedTypes`	Type: `Array<string>optional` Default:`null` Excluded place types. HTML attribute: `<gmp-place-nearby-search-request excluded-types="excluded-type1 excluded-type2..."></gmp-place-nearby-search-request>`
`includedPrimaryTypes`	Type: `Array<string>optional` Default:`null` Included primary place type. HTML attribute: `<gmp-place-nearby-search-request included-primary-types="included-primary-type1 included-primary-type2..."></gmp-place-nearby-search-request>`
`includedTypes`	Type: `Array<string>optional` Default:`null` Included place type. HTML attribute: `<gmp-place-nearby-search-request included-types="included-type1 included-type2..."></gmp-place-nearby-search-request>`
`locationRestriction`	Type: `Circle\|CircleLiteraloptional` Default:`null` The region to search. Normalizes to a`Circle`. HTML attribute: `<gmp-place-nearby-search-request location-restriction="radius@lat,lng"></gmp-place-nearby-search-request>`
`maxResultCount`	Type: `numberoptional` Default:`null` Maximum number of results to return. HTML attribute: `<gmp-place-nearby-search-request max-result-count="number"></gmp-place-nearby-search-request>`
`rankPreference`	Type: `SearchNearbyRankPreferenceoptional` Default:`null` How results will be ranked in the response. HTML attribute: `<gmp-place-nearby-search-request rank-preference="preference"></gmp-place-nearby-search-request>`

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

PlaceNearbySearchRequestElementOptionsinterface

google.maps.places.PlaceNearbySearchRequestElementOptionsinterface

Options forPlaceNearbySearchRequestElement.

Properties
`excludedPrimaryTypesoptional`	Type: `Array<string>optional` Excluded primary place types. See`PlaceNearbySearchRequestElement.excludedPrimaryTypes` and`SearchNearbyRequest.excludedPrimaryTypes` for more details.
`excludedTypesoptional`	Type: `Array<string>optional` Excluded place types. See`PlaceNearbySearchRequestElement.excludedTypes` and`SearchNearbyRequest.excludedTypes` for more details.
`includedPrimaryTypesoptional`	Type: `Array<string>optional` Included primary place types. See`PlaceNearbySearchRequestElement.includedPrimaryTypes` and`SearchNearbyRequest.includedPrimaryTypes` for more details.
`includedTypesoptional`	Type: `Array<string>optional` Included place types. See`PlaceNearbySearchRequestElement.includedTypes` and`SearchNearbyRequest.includedTypes` for more details.
`locationRestrictionoptional`	Type: `Circle\|CircleLiteraloptional` The region to search. See`PlaceNearbySearchRequestElement.locationRestriction` and`SearchNearbyRequest.locationRestriction` for more details.
`maxResultCountoptional`	Type: `numberoptional` Maximum number of results to return. See`PlaceNearbySearchRequestElement.maxResultCount` and`SearchNearbyRequest.maxResultCount` for more details.
`rankPreferenceoptional`	Type: `SearchNearbyRankPreferenceoptional` How results will be ranked in the response. See`PlaceNearbySearchRequestElement.rankPreference` and`SearchNearbyRankPreference` for more details.

PlaceTextSearchRequestElementclass

google.maps.places.PlaceTextSearchRequestElementclass

Configures aPlaceSearchElement to load results based on a text search request. ThetextQuery property is required for the search element to load. Any other configured properties will be ignored iftextQuery is not set. Append this element as a child of aPlaceSearchElement to load results. For example:

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

Custom element:
<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>

This class extendsHTMLElement.

This class implementsPlaceTextSearchRequestElementOptions.

Access by callingconst {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`PlaceTextSearchRequestElement`	`PlaceTextSearchRequestElement([options])` Parameters: `options`: `PlaceTextSearchRequestElementOptionsoptional`

Properties
`evConnectorTypes`	Type: `Array<EVConnectorType>optional` Default:`null` The list of preferred EV connector types. HTML attribute: `<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..."></gmp-place-text-search-request>`
`evMinimumChargingRateKw`	Type: `numberoptional` Default:`null` Minimum required charging rate in kilowatts. HTML attribute: `<gmp-place-text-search-request ev-minimum-charging-rate-kw="rate"></gmp-place-text-search-request>`
`includedType`	Type: `stringoptional` Default:`null` The requested place type. HTML attribute: `<gmp-place-text-search-request included-type="type"></gmp-place-text-search-request>`
`isOpenNow`	Type: `booleanoptional` Default:`null` Used to restrict the search to places that are currently open. HTML attribute: `<gmp-place-text-search-request is-open-now="true"></gmp-place-text-search-request>`
`locationBias`	Type: `LocationBiasoptional` Default:`null` Location bias for the search. Normalizes to a`LatLngAltitude \| LatLngBounds \| Circle \| string`. HTML attribute: `<gmp-place-text-search-request location-bias="lat,lng"></gmp-place-text-search-request>` `<gmp-place-text-search-request location-bias="lat,lng[,altitude]"></gmp-place-text-search-request>` `<gmp-place-text-search-request location-bias="swlat,swlng\|nelat,nelng"></gmp-place-text-search-request>` `<gmp-place-text-search-request location-bias="radius@lat,lng"></gmp-place-text-search-request>` `<gmp-place-text-search-request location-bias="IP_BIAS"></gmp-place-text-search-request>`
`locationRestriction`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` Default:`null` Location restriction for the search. Normalizes to a`LatLngBounds`. HTML attribute: `<gmp-place-text-search-request location-restriction="swlat,swlng\|nelat,nelng"></gmp-place-text-search-request>`
`maxResultCount`	Type: `numberoptional` Default:`null` Maximum number of results to return. HTML attribute: `<gmp-place-text-search-request max-result-count="number"></gmp-place-text-search-request>`
`minRating`	Type: `numberoptional` Default:`null` Filter out results whose average user rating is strictly less than this limit. HTML attribute: `<gmp-place-text-search-request min-rating="number"></gmp-place-text-search-request>`
`priceLevels`	Type: `Array<PriceLevel>optional` Default:`null` Used to restrict the search to places that are marked as certain price levels. HTML attribute: `<gmp-place-text-search-request price-levels="price-level1 price-level2..."></gmp-place-text-search-request>`
`rankPreference`	Type: `SearchByTextRankPreferenceoptional` Default:`null` How results will be ranked in the response. HTML attribute: `<gmp-place-text-search-request rank-preference="preference"></gmp-place-text-search-request>`
`textQuery`	Type: `stringoptional` Default:`null` The text query for textual search. HTML attribute: `<gmp-place-text-search-request text-query="string"></gmp-place-text-search-request>`
`useStrictTypeFiltering`	Type: `booleanoptional` Default:`null` Used to set strict type filtering for 'includedType'. HTML attribute: `<gmp-place-text-search-request use-strict-type-filtering></gmp-place-text-search-request>`

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

PlaceTextSearchRequestElementOptionsinterface

google.maps.places.PlaceTextSearchRequestElementOptionsinterface

Options forPlaceTextSearchRequestElement.

Properties
`evConnectorTypesoptional`	Type: `Array<EVConnectorType>optional` The list of preferred EV connector types. See`SearchByTextRequest.evSearchOptions` and`PlaceTextSearchRequestElement.evConnectorTypes` for more details.
`evMinimumChargingRateKwoptional`	Type: `numberoptional` Minimum required charging rate in kilowatts. See`SearchByTextRequest.evSearchOptions` and`PlaceTextSearchRequestElement.evMinimumChargingRateKw` for more details.
`includedTypeoptional`	Type: `stringoptional` The requested place type. See`SearchByTextRequest.includedType` and`PlaceTextSearchRequestElement.includedType` for more details.
`isOpenNowoptional`	Type: `booleanoptional` Used to restrict the search to places that are currently open. See`SearchByTextRequest.isOpenNow` and`PlaceTextSearchRequestElement.isOpenNow` for more details.
`locationBiasoptional`	Type: `LocationBiasoptional` Location bias for the search. See`SearchByTextRequest.locationBias` and`PlaceTextSearchRequestElement.locationBias` for more details.
`locationRestrictionoptional`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` Location restriction for the search. See`SearchByTextRequest.locationRestriction` and`PlaceTextSearchRequestElement.locationRestriction` for more details.
`maxResultCountoptional`	Type: `numberoptional` Maximum number of results to return. See`SearchByTextRequest.maxResultCount` and`PlaceTextSearchRequestElement.maxResultCount` for more details.
`minRatingoptional`	Type: `numberoptional` Filter out results whose average user rating is strictly less than this limit. See`SearchByTextRequest.minRating` and`PlaceTextSearchRequestElement.minRating` for more details.
`priceLevelsoptional`	Type: `Array<PriceLevel>optional` Used to restrict the search to places that are marked as certain price levels. See`SearchByTextRequest.priceLevels` and`PlaceTextSearchRequestElement.priceLevels` for more details.
`rankPreferenceoptional`	Type: `SearchByTextRankPreferenceoptional` How results will be ranked in the response. See`SearchByTextRequest.rankPreference` and`PlaceTextSearchRequestElement.rankPreference` for more details.
`textQueryoptional`	Type: `stringoptional` The text query for textual search. See`SearchByTextRequest.textQuery` and`PlaceTextSearchRequestElement.textQuery` for more details.
`useStrictTypeFilteringoptional`	Type: `booleanoptional` Used to set strict type filtering for`SearchByTextRequest.includedType`. See`SearchByTextRequest.useStrictTypeFiltering` and`PlaceTextSearchRequestElement.useStrictTypeFiltering` for more details.

Autocompleteclass

google.maps.places.Autocompleteclass

Deprecated: As of March 1st, 2025, google.maps.places.Autocomplete is not available to new customers. Please usePlaceAutocompleteElement instead. At this time, google.maps.places.Autocomplete is not scheduled to be discontinued, butPlaceAutocompleteElement is recommended over google.maps.places.Autocomplete. While google.maps.places.Autocomplete will continue to receive bug fixes for any major regressions, existing bugs in google.maps.places.Autocomplete will not be addressed. At least 12 months notice will be given before support is discontinued. Please seehttps://developers.google.com/maps/legacy for additional details andhttps://developers.google.com/maps/documentation/javascript/places-migration-overview for the migration guide.

A widget that provides Place predictions based on a user's text input. It attaches to an input element of typetext, and listens for text entry in that field. The list of predictions is presented as a drop-down list, and is updated as text is entered.

This class extendsMVCObject.

Access by callingconst {Autocomplete} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`Autocomplete`	`Autocomplete(inputField[, opts])` Parameters: `inputField`: `HTMLInputElement` The`<input>` text field to which the`Autocomplete` should be attached. `opts`: `AutocompleteOptionsoptional` Options. Creates a new instance of`Autocomplete` that attaches to the specified input text field with the given options.

Methods
`getBounds`	`getBounds()` Parameters: None Return Value: `LatLngBounds\|undefined` The biasing bounds. Returns the bounds to which predictions are biased.
`getFields`	`getFields()` Parameters: None Return Value: `Array<string>\|undefined` Returns the fields to be included for the Place in the details response when the details are successfully retrieved. For a list of fields see`PlaceResult`.
`getPlace`	`getPlace()` Parameters: None Return Value: `PlaceResult` The Place selected by the user. Returns the details of the Place selected by user if the details were successfully retrieved. Otherwise returns a stub Place object, with the`name` property set to the current value of the input field.
`setBounds`	`setBounds(bounds)` Parameters: `bounds`: `LatLngBounds\|LatLngBoundsLiteraloptional` The biasing bounds. Return Value: None Sets the preferred area within which to return Place results. Results are biased towards, but not restricted to, this area.
`setComponentRestrictions`	`setComponentRestrictions(restrictions)` Parameters: `restrictions`: `ComponentRestrictionsoptional` The restrictions to use. Return Value: None Sets the component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country.
`setFields`	`setFields(fields)` Parameters: `fields`: `Array<string>optional` Return Value: None Sets the fields to be included for the Place in the details response when the details are successfully retrieved. For a list of fields see`PlaceResult`.
`setOptions`	`setOptions(options)` Parameters: `options`: `AutocompleteOptionsoptional` Return Value: None
`setTypes`	`setTypes(types)` Parameters: `types`: `Array<string>optional` The types of predictions to be included. Return Value: None Sets the types of predictions to be returned. For supported types, see the developer's guide. If no types are specified, all types will be returned.
Inherited:`addListener`,`bindTo`,`get`,`notify`,`set`,`setValues`,`unbind`,`unbindAll`

Events
`place_changed`	`function()` Arguments: None This event is fired when a`PlaceResult` is made available for a Place the user has selected. If the user enters the name of a Place that was not suggested by the control and presses the Enter key, or if a Place Details request fails, the`PlaceResult` contains the user input in the`name` property, with no other properties defined.

AutocompleteOptionsinterface

google.maps.places.AutocompleteOptionsinterface

The options that can be set on anAutocomplete object.

Properties
`boundsoptional`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` The area in which to search for places.
`componentRestrictionsoptional`	Type: `ComponentRestrictionsoptional` The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country.
`fieldsoptional`	Type: `Array<string>optional` Fields to be included for the Place in the details response when the details are successfully retrieved,which will be billed for. If`['ALL']` is passed in, all available fields will be returned and billed for (this is not recommended for production deployments). For a list of fields see`PlaceResult`. Nested fields can be specified with dot-paths (for example,`"geometry.location"`). The default is`['ALL']`.
`placeIdOnlyoptional`	Deprecated:`placeIdOnly` is deprecated as of January 15, 2019, and will be turned off on January 15, 2020. Use`AutocompleteOptions.fields` instead:`fields: ['place_id', 'name', 'types']`. Type: `booleanoptional` Whether to retrieve only Place IDs. The PlaceResult made available when the place_changed event is fired will only have the place_id, types and name fields, with the place_id, types and description returned by the Autocomplete service. Disabled by default.
`strictBoundsoptional`	Type: `booleanoptional` A boolean value, indicating that the Autocomplete widget should only return those places that are inside the bounds of the Autocomplete widget at the time the query is sent. Setting strictBounds to`false` (which is the default) will make the results biased towards, but not restricted to, places contained within the bounds.
`typesoptional`	Type: `Array<string>optional` The types of predictions to be returned. For supported types, see the developer's guide. If no types are specified, all types will be returned.

SearchBoxclass

google.maps.places.SearchBoxclass

Deprecated: As of March 1st, 2025, google.maps.places.SearchBox is not available to new customers. At this time, google.maps.places.SearchBox is not scheduled to be discontinued and will continue to receive bug fixes for any major regressions. At least 12 months notice will be given before support is discontinued. Please seehttps://developers.google.com/maps/legacy for additional details.

A widget that provides query predictions based on a user's text input. It attaches to an input element of typetext, and listens for text entry in that field. The list of predictions is presented as a drop-down list, and is updated as text is entered.

This class extendsMVCObject.

Access by callingconst {SearchBox} = await google.maps.importLibrary("places").
SeeLibraries in the Maps JavaScript API.

Constructor
`SearchBox`	`SearchBox(inputField[, opts])` Parameters: `inputField`: `HTMLInputElement` `opts`: `SearchBoxOptionsoptional` Creates a new instance of`SearchBox` that attaches to the specified input text field with the given options.

Methods
`getBounds`	`getBounds()` Parameters: None Return Value: `LatLngBounds\|undefined` Returns the bounds to which query predictions are biased.
`getPlaces`	`getPlaces()` Parameters: None Return Value: `Array<PlaceResult>\|undefined` Returns the query selected by the user to be used with`places_changed` event.
`setBounds`	`setBounds(bounds)` Parameters: `bounds`: `LatLngBounds\|LatLngBoundsLiteraloptional` Return Value: None Sets the region to use for biasing query predictions. Results will only be biased towards this area and not be completely restricted to it.
Inherited:`addListener`,`bindTo`,`get`,`notify`,`set`,`setValues`,`unbind`,`unbindAll`

Events
`places_changed`	`function()` Arguments: None This event is fired when the user selects a query,`getPlaces` should be used to get new places.

SearchBoxOptionsinterface

google.maps.places.SearchBoxOptionsinterface

The options that can be set on aSearchBox object.

Properties
`boundsoptional`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` The area towards which to bias query predictions. Predictions are biased towards, but not restricted to, queries targeting these bounds.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.

Movatterモバイル変換

Places Widgets Stay organized with collections Save and categorize content based on your preferences.

BasicPlaceAutocompleteElementclass

Constructor

Properties

Slots

Parts

CSS Properties

Methods

Events

BasicPlaceAutocompleteElementOptionsinterface

Properties

PlaceAutocompleteElementclass

Constructor

Properties

Slots

Parts

CSS Properties

Methods

Events

PlaceAutocompleteElementOptionsinterface

Properties

PlacePredictionSelectEventclass

Properties

PlaceContextualElementclass

Constructor

Properties

Methods

PlaceContextualElementOptionsinterface

Properties

PlaceContextualListConfigElementclass

Constructor

Properties

Methods

PlaceContextualListConfigElementOptionsinterface

Properties

PlaceContextualListLayoutconstants

Constants

PlaceDetailsElementclass

Constructor

Properties

CSS Properties

Methods

Events

PlaceDetailsElementOptionsinterface

PlaceDetailsCompactElementclass

Constructor

Properties

CSS Properties

Methods

Events

PlaceDetailsCompactElementOptionsinterface

Properties

PlaceDetailsOrientationconstants

Constants

PlaceDetailsPlaceRequestElementclass

Constructor

Properties

Methods

PlaceDetailsPlaceRequestElementOptionsinterface

Properties

PlaceDetailsLocationRequestElementclass

Constructor

Properties

Methods

PlaceDetailsLocationRequestElementOptionsinterface

Properties

PlaceSearchElementclass

Constructor

Properties

CSS Properties

Methods

Events

PlaceSearchElementOptionsinterface

Properties

PlaceSearchAttributionPositionconstants

Constants

PlaceSearchOrientationconstants

Constants

PlaceSelectEventclass

Places Widgets