## [PlaceAutocompleteElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceAutocompleteElement)
class
class
`google.maps.places.PlaceAutocompleteElement`
extends `HTMLElement`
implements `PlaceAutocompleteElementOptions`
library `"places"`
PlaceAutocompleteElement is an `HTMLElement` subclass which provides a UI component for the Places Autocomplete API.
PlaceAutocompleteElement automatically uses `AutocompleteSessionToken`s internally to group the query and selection phases of a user's autocomplete search.
The first call to `Place.fetchFields` on a `Place` returned by `PlacePrediction.toPlace` will automatically include the session token used to fetch the `PlacePrediction`.
See for more details on how sessions work.
```html
```
```javascript
const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceAutocompleteElement` | `PlaceAutocompleteElement([options])` **Parameters:** - `options: PlaceAutocompleteElementOptions optional` |
| ### Properties ||
|---|---|
| `description` attr: description | **Type:** `string optional` The description to be used for the input element. This will be detected by screen readers when the input element is focused. See for details. **HTML attribute:** `description="string"` |
| `disabled` attr: disabled | **Input type:** `boolean optional` **Output type:** `boolean` Whether the input element is disabled. See for details. **HTML attribute:** `disabled` |
| `futureOpeningBusinessesIncluded` attr: future-opening-businesses-included | **Type:** `boolean optional` Whether to include places that are not yet open but are expected to open in the future. **HTML attribute:** `future-opening-businesses-included` |
| `includedPrimaryTypes` attr: included-primary-types | **Type:** `Array optional` Included primary [Place type](https://developers.google.com/maps/documentation/places/javascript/place-types) (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:** `included-primary-types="type1 type2 type3..."` |
| `includedRegionCodes` attr: included-region-codes | **Type:** `Array 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:** `included-region-codes="c1 c2 c3..."` |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `locationBias` | **Type:** `LocationBias optional` A soft boundary or hint to use when searching for places. |
| `locationRestriction` | **Type:** `LocationRestriction optional` Bounds to constrain search results. |
| `maxlength` attr: maxlength | **Type:** `number optional` The maximum number of characters that the user can enter. See for details. **HTML attribute:** `maxlength="number"` |
| `name` attr: name | **Type:** `string optional` The name to be used for the input element. See 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. See for details. **HTML attribute:** `name="string"` |
| `noClearButton` attr: no-clear-button | **Input type:** `boolean optional` **Output type:** `boolean` Whether to hide the clear button. **HTML attribute:** `no-clear-button` |
| `noInputIcon` attr: no-input-icon | **Input type:** `boolean optional` **Output type:** `boolean` Whether to hide the input icon. **HTML attribute:** `no-input-icon` |
| `origin` attr: origin | **Input type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` **Output type:** `LatLngAltitude optional` 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:** - `origin="lat,lng"` - `origin="lat,lng,altitude"` |
| `placeholder` attr: placeholder | **Type:** `string optional` The placeholder text to be used for the input element. See for details. **HTML attribute:** `placeholder="string"` |
| `pureServiceAreaBusinessesIncluded` attr: pure-service-area-businesses-included | **Type:** `boolean optional` Whether to include places that are pure service area businesses. **HTML attribute:** `pure-service-area-businesses-included` |
| `readonly` attr: readonly | **Input type:** `boolean optional` **Output type:** `boolean` Whether the input element is read-only. See for details. **HTML attribute:** `readonly` |
| `requestedLanguage` attr: requested-language | **Type:** `string optional` 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 the [list of supported languages](https://developers.google.com/maps/faq.md.txt#languagesupport). **HTML attribute:** `requested-language="string"` |
| `requestedRegion` attr: requested-region | **Type:** `string optional` 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 a [ccTLD ("top-level domain")](https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains#Country_code_top-level_domains) 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:** `requested-region="string"` |
| `unitSystem` attr: unit-system | **Input type:** `UnitSystem optional` **Output type:** `UnitSystem optional` The unit system used to display distances. If not specified, the unit system is determined by requestedRegion. **HTML attribute:** `unit-system="value-name"` |
| `value` | **Input type:** `string optional` **Output type:** `string` The value of the input element. |
| ### Slots ||
|---|---|
| `clear-icon` | Places the slotted element in the clear icon position. The clear button is displayed at the end of the input box when there is text in the input. |
| `input-icon` | Places the slotted element in the input icon position. The input icon is displayed at the beginning of the input box in inline mode. |
| `prediction-item-icon` | This slot accepts exactly one `` element to render as the icon shown next to the prediction item. |
| ### Parts ||
|---|---|
| `focus-ring` | The element used to display the focus ring around the focused element (input or prediction-items) |
| `input` | The input element for the autocomplete element. |
| `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 is only highlighted within prediction-item-main-text. |
| `prediction-item-nonmatch` | The part of the prediction main text that does not match the user's input. |
| `prediction-item-secondary-text` | A part of prediction-item that is the secondary text of the prediction. The additional text is typically an address. |
| `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` | Overrides the font of the element. |
| `color-scheme` | Indicates which color scheme this element can be rendered in. See `color-scheme` [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) for more details. Defaults to `color-scheme: light dark`. |
| `font` | Overrides the font of the element. |
| `font-family` | Overrides the font of the element. |
| `font-size` | Overrides the font of the element. |
| `font-style` | Overrides the font of the element. |
| `font-weight` | Overrides the font of the element. |
| `line-height` | Overrides the font of the element. |
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(errorEvent)` **Arguments:** - `errorEvent: Event optional` 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 optional` This event is fired when a user selects a place prediction. Contains a PlacePrediction object which can be converted to a Place object. |
## [PlaceAutocompleteElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceAutocompleteElementOptions)
interface
interface
`google.maps.places.PlaceAutocompleteElementOptions`
implemented by `PlaceAutocompleteElement`
Options for constructing a PlaceAutocompleteElement. For the description of each property, refer to the property of the same name in the PlaceAutocompleteElement class.
| ### Properties ||
|---|---|
| `description` optional | **Type:** `string optional` The description to be used for the input element. This will be detected by screen readers when the input element is focused. |
| `disabled` optional | **Type:** `boolean optional` |
| `futureOpeningBusinessesIncluded` optional | **Type:** `boolean optional` |
| `includedPrimaryTypes` optional | **Type:** `Array optional` |
| `includedRegionCodes` optional | **Type:** `Array optional` |
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` |
| `locationBias` optional | **Type:** `LocationBias optional` |
| `locationRestriction` optional | **Type:** `LocationRestriction optional` |
| `maxlength` optional | **Type:** `number optional` |
| `name` optional | **Type:** `string optional` |
| `noClearButton` optional | **Type:** `boolean optional` |
| `noInputIcon` optional | **Type:** `boolean optional` |
| `origin` optional | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` |
| `placeholder` optional | **Type:** `string optional` |
| `pureServiceAreaBusinessesIncluded` optional | **Type:** `boolean optional` |
| `readonly` optional | **Type:** `boolean optional` |
| `requestedLanguage` optional | **Type:** `string optional` |
| `requestedRegion` optional | **Type:** `string optional` |
| `unitSystem` optional | **Type:** `UnitSystem optional` |
| `value` optional | **Type:** `string optional` The value of the input element. |
## [PlacePredictionSelectEvent](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlacePredictionSelectEvent)
class
class
`google.maps.places.PlacePredictionSelectEvent`
extends `Event`
library `"places"`
This event is created after the user selects a prediction item with the PlaceAutocompleteElement. Access the selection with `event.placePrediction`.
Convert placePrediction to a `Place` by calling `PlacePrediction.toPlace`.
```javascript
const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");
```
| ### Properties ||
|---|---|
| `placePrediction` readonly | **Type:** `PlacePrediction` Convert this to a `Place` by calling `PlacePrediction.toPlace`. |
## [BasicPlaceAutocompleteElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#BasicPlaceAutocompleteElement)
class
class
`google.maps.places.BasicPlaceAutocompleteElement`
extends `HTMLElement`
implements `BasicPlaceAutocompleteElementOptions`
library `"places"`
BasicPlaceAutocompleteElement is an `HTMLElement` subclass which provides a UI component for the Places Autocomplete API.
```html
```
```javascript
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `BasicPlaceAutocompleteElement` | `BasicPlaceAutocompleteElement([options])` **Parameters:** - `options: BasicPlaceAutocompleteElementOptions optional` |
| ### Properties ||
|---|---|
| `description` attr: description | **Type:** `string optional` The description to be used for the input element. This will be detected by screen readers when the input element is focused. See for details. **HTML attribute:** `description="string"` |
| `disabled` attr: disabled | **Input type:** `boolean optional` **Output type:** `boolean` Whether the input element is disabled. See for details. **HTML attribute:** `disabled` |
| `futureOpeningBusinessesIncluded` attr: future-opening-businesses-included | **Type:** `boolean optional` Whether to include places that are not yet open but are expected to open in the future. **HTML attribute:** `future-opening-businesses-included` |
| `includedPrimaryTypes` attr: included-primary-types | **Type:** `Array optional` Included primary [Place type](https://developers.google.com/maps/documentation/places/javascript/place-types) (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:** `included-primary-types="type1 type2 type3..."` |
| `includedRegionCodes` attr: included-region-codes | **Type:** `Array 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:** `included-region-codes="c1 c2 c3..."` |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `locationBias` | **Type:** `LocationBias optional` A soft boundary or hint to use when searching for places. |
| `locationRestriction` | **Type:** `LocationRestriction optional` Bounds to constrain search results. |
| `maxlength` attr: maxlength | **Type:** `number optional` The maximum number of characters that the user can enter. See for details. **HTML attribute:** `maxlength="number"` |
| `name` attr: name | **Type:** `string optional` The name to be used for the input element. See 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. See for details. **HTML attribute:** `name="string"` |
| `noClearButton` attr: no-clear-button | **Input type:** `boolean optional` **Output type:** `boolean` Whether to hide the clear button. **HTML attribute:** `no-clear-button` |
| `noInputIcon` attr: no-input-icon | **Input type:** `boolean optional` **Output type:** `boolean` Whether to hide the input icon. **HTML attribute:** `no-input-icon` |
| `origin` attr: origin | **Input type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` **Output type:** `LatLngAltitude optional` 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:** - `origin="lat,lng"` - `origin="lat,lng,altitude"` |
| `placeholder` attr: placeholder | **Type:** `string optional` The placeholder text to be used for the input element. See for details. **HTML attribute:** `placeholder="string"` |
| `pureServiceAreaBusinessesIncluded` attr: pure-service-area-businesses-included | **Type:** `boolean optional` Whether to include places that are pure service area businesses. **HTML attribute:** `pure-service-area-businesses-included` |
| `readonly` attr: readonly | **Input type:** `boolean optional` **Output type:** `boolean` Whether the input element is read-only. See for details. **HTML attribute:** `readonly` |
| `requestedLanguage` attr: requested-language | **Type:** `string optional` 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 the [list of supported languages](https://developers.google.com/maps/faq.md.txt#languagesupport). **HTML attribute:** `requested-language="string"` |
| `requestedRegion` attr: requested-region | **Type:** `string optional` 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 a [ccTLD ("top-level domain")](https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains#Country_code_top-level_domains) 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:** `requested-region="string"` |
| `unitSystem` attr: unit-system | **Input type:** `UnitSystem optional` **Output type:** `UnitSystem optional` The unit system used to display distances. If not specified, the unit system is determined by requestedRegion. **HTML attribute:** `unit-system="value-name"` |
| ### Slots ||
|---|---|
| `clear-icon` | Places the slotted element in the clear icon position. The clear button is displayed at the end of the input box when there is text in the input. |
| `input-icon` | Places the slotted element in the input icon position. The input icon is displayed at the beginning of the input box in inline mode. |
| `prediction-item-icon` | This slot accepts exactly one `` element to render as the icon shown next to the prediction item. |
| ### Parts ||
|---|---|
| `focus-ring` | The element used to display the focus ring around the focused element (input or prediction-items) |
| `input` | The input element for the autocomplete element. |
| `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 is only highlighted within prediction-item-main-text. |
| `prediction-item-nonmatch` | The part of the prediction main text that does not match the user's input. |
| `prediction-item-secondary-text` | A part of prediction-item that is the secondary text of the prediction. The additional text is typically an address. |
| `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` | Overrides the font of the element. |
| `color-scheme` | Indicates which color scheme this element can be rendered in. See `color-scheme` [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) for more details. Defaults to `color-scheme: light dark`. |
| `font` | Overrides the font of the element. |
| `font-family` | Overrides the font of the element. |
| `font-size` | Overrides the font of the element. |
| `font-style` | Overrides the font of the element. |
| `font-weight` | Overrides the font of the element. |
| `line-height` | Overrides the font of the element. |
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(errorEvent)` **Arguments:** - `errorEvent: Event optional` 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 optional` This event is fired when a user selects a place prediction. Contains a Place object. |
## [BasicPlaceAutocompleteElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#BasicPlaceAutocompleteElementOptions)
interface
interface
`google.maps.places.BasicPlaceAutocompleteElementOptions`
implemented by `BasicPlaceAutocompleteElement`
Options for constructing a BasicPlaceAutocompleteElement.
| ### Properties ||
|---|---|
| `description` optional | **Type:** `string optional` The description to be used for the input element. This will be detected by screen readers when the input element is focused. |
| `disabled` optional | **Type:** `boolean optional` |
| `futureOpeningBusinessesIncluded` optional | **Type:** `boolean optional` |
| `includedPrimaryTypes` optional | **Type:** `Array optional` |
| `includedRegionCodes` optional | **Type:** `Array optional` |
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` |
| `locationBias` optional | **Type:** `LocationBias optional` |
| `locationRestriction` optional | **Type:** `LocationRestriction optional` |
| `maxlength` optional | **Type:** `number optional` |
| `name` optional | **Type:** `string optional` |
| `noClearButton` optional | **Type:** `boolean optional` |
| `noInputIcon` optional | **Type:** `boolean optional` |
| `origin` optional | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` |
| `placeholder` optional | **Type:** `string optional` |
| `pureServiceAreaBusinessesIncluded` optional | **Type:** `boolean optional` |
| `readonly` optional | **Type:** `boolean optional` |
| `requestedLanguage` optional | **Type:** `string optional` |
| `requestedRegion` optional | **Type:** `string optional` |
| `unitSystem` optional | **Type:** `UnitSystem optional` |
## [PlaceDetailsElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsElement)
class
class
`google.maps.places.PlaceDetailsElement`
extends `HTMLElement`
implements `PlaceDetailsElementOptions`
extended by `AdvancedPlaceDetailsElement`
library `"places"`
Displays details for a place in a full layout. Append either a `PlaceDetailsPlaceRequestElement` or `PlaceDetailsLocationRequestElement` to specify the place to be rendered. Append a `PlaceContentConfigElement`, `PlaceStandardContentElement`, or `PlaceAllContentElement` to specify which content to render.
Example:
To use this element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {PlaceDetailsElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceDetailsElement` | `PlaceDetailsElement([options])` **Parameters:** - `options: PlaceDetailsElementOptions optional` |
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `place` readonly | **Type:** `Place optional` 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 badge. |
| `--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-popular-times-bar-color` | Color of the popular times chart bars for hours other than the current hour. |
| `--gmp-popular-times-bar-current-hour-color` | Color of the popular times chart bar for the current hour. |
| `--gmp-popular-times-bar-current-hour-live-color` | Color of the live busyness bar for the current hour and of the live busyness status text in the popular times chart. Used only when live data is available. |
| `--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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) 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 ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(event)` **Arguments:** - `event: Event optional` 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 optional` This event is fired when the element loads and renders its content. This event does not bubble. |
## [PlaceDetailsElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsElementOptions)
interface
interface
`google.maps.places.PlaceDetailsElementOptions`
extended by `AdvancedPlaceDetailsElementOptions`
implemented by `AdvancedPlaceDetailsElement, PlaceDetailsElement`
Options for `PlaceDetailsElement`.
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
## [PlaceDetailsCompactElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsCompactElement)
class
class
`google.maps.places.PlaceDetailsCompactElement`
extends `HTMLElement`
implements `PlaceDetailsCompactElementOptions`
extended by `AdvancedPlaceDetailsCompactElement`
library `"places"`
Displays details for a place in a compact layout. Append a `PlaceDetailsPlaceRequestElement` or `PlaceDetailsLocationRequestElement` to specify the place to be rendered. Append a `PlaceContentConfigElement`, `PlaceStandardContentElement`, or `PlaceAllContentElement` to specify which content to render.
Example:
To use this element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceDetailsCompactElement` | `PlaceDetailsCompactElement([options])` **Parameters:** - `options: PlaceDetailsCompactElementOptions optional` |
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `orientation` attr: orientation | **Type:** `PlaceDetailsOrientation optional` **Default:** `PlaceDetailsOrientation.VERTICAL` The orientation variant (vertical or horizontal) of the element. **HTML attribute:** `orientation="value-name"` |
| `place` readonly | **Type:** `Place optional` Read only. Place object containing the ID, location, and viewport of the currently rendered place. |
| `truncationPreferred` attr: truncation-preferred | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` If true, truncates the place name and address to fit on one line instead of wrapping. **HTML attribute:** `truncation-preferred` |
| ### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) 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 ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(event)` **Arguments:** - `event: Event optional` 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 optional` This event is fired when the element loads and renders its content. This event does not bubble. |
## [PlaceDetailsCompactElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsCompactElementOptions)
interface
interface
`google.maps.places.PlaceDetailsCompactElementOptions`
extended by `AdvancedPlaceDetailsCompactElementOptions`
implemented by `AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement`
Options for `PlaceDetailsCompactElement`.
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
| `orientation` optional | **Type:** `PlaceDetailsOrientation optional` See `PlaceDetailsCompactElement.orientation`. |
| `truncationPreferred` optional | **Type:** `boolean optional` See `PlaceDetailsCompactElement.truncationPreferred`. |
## [AdvancedPlaceDetailsElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceDetailsElement)
class
class
`google.maps.places.AdvancedPlaceDetailsElement`
extends `PlaceDetailsElement, HTMLElement`
implements `AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions`
library `"places"`
Displays details for a place in a full layout. Append either a `PlaceDetailsPlaceRequestElement` or `PlaceDetailsLocationRequestElement` to specify the place to be rendered. Append a `PlaceStandardContentElement`, `PlaceAllContentElement` or place details elements directly to configure the content to render.
Example:
To use this element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `AdvancedPlaceDetailsElement` | `AdvancedPlaceDetailsElement([options])` **Parameters:** - `options: AdvancedPlaceDetailsElementOptions optional` |
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `place` readonly | **Type:** `Place optional` Read only. Place object containing the ID, location, and viewport of the currently rendered place. |
| ### Slots ||
|---|---|
| `action-corner` | A slot for `PlaceLinkElement` and `PlaceButtonElement`. |
| `action-main` | A slot for `PlaceLinkElement` and `PlaceButtonElement`. |
| `basic-section-bottom` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). A slot for custom HTML content rendered at the bottom of the basic information section, directly below the main action buttons. |
| `basic-section-top` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). A slot for custom HTML content rendered in the basic information section, directly above the place name. |
| ### CSS Properties ||
|---|---|
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
## [AdvancedPlaceDetailsElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceDetailsElementOptions)
interface
interface
`google.maps.places.AdvancedPlaceDetailsElementOptions`
extends `PlaceDetailsElementOptions`
implemented by `AdvancedPlaceDetailsElement`
Options for `AdvancedPlaceDetailsElement`.
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
## [AdvancedPlaceDetailsCompactElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceDetailsCompactElement)
class
class
`google.maps.places.AdvancedPlaceDetailsCompactElement`
extends `PlaceDetailsCompactElement, HTMLElement`
implements `AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions`
library `"places"`
Displays details for a place in a compact layout. Append a `PlaceDetailsPlaceRequestElement` or `PlaceDetailsLocationRequestElement` to specify the place to be rendered. Append a `PlaceStandardContentElement`, `PlaceAllContentElement` or specify specific content children to configure the content to render.
To use this element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `AdvancedPlaceDetailsCompactElement` | `AdvancedPlaceDetailsCompactElement([options])` **Parameters:** - `options: AdvancedPlaceDetailsCompactElementOptions optional` |
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `place` readonly | **Type:** `Place optional` Read only. Place object containing the ID, location, and viewport of the currently rendered place. |
| ### Slots ||
|---|---|
| `action-corner` | A slot for `PlaceLinkElement` and `PlaceButtonElement`. |
| `action-main` | A slot for `PlaceLinkElement` and `PlaceButtonElement`. |
| `basic-section-bottom` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). A slot for custom HTML content rendered at the bottom of the basic information section, directly below the main action buttons. |
| `basic-section-top` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). A slot for custom HTML content rendered in the basic information section, directly above the place name. |
| ### CSS Properties ||
|---|---|
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
## [AdvancedPlaceDetailsCompactElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceDetailsCompactElementOptions)
interface
interface
`google.maps.places.AdvancedPlaceDetailsCompactElementOptions`
extends `PlaceDetailsCompactElementOptions`
implemented by `AdvancedPlaceDetailsCompactElement`
Options for `AdvancedPlaceDetailsCompactElement`.
| ### Properties ||
|---|---|
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
## [PlaceDetailsOrientation](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsOrientation)
constants
constants
`google.maps.places.PlaceDetailsOrientation`
library `"places"`
Orientation variants for `PlaceDetailsCompactElement`.
These constants are also usable as strings. In TypeScript, the string literals are defined by the `PlaceDetailsOrientationString` type.
```javascript
const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");
```
| ### Constants ||
|---|---|
| `HORIZONTAL` | Horizontal orientation. |
| `VERTICAL` | Vertical orientation. |
## [PlaceDetailsPlaceRequestElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsPlaceRequestElement)
class
class
`google.maps.places.PlaceDetailsPlaceRequestElement`
extends `HTMLElement`
implements `PlaceDetailsPlaceRequestElementOptions`
library `"places"`
Configures a `PlaceDetailsCompactElement` or `PlaceDetailsElement` to load data based on a place object, ID, or resource name. Append this element as a child of a `PlaceDetailsCompactElement` or `PlaceDetailsElement` to load data for the specified place. For example:
```html
```
```javascript
const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceDetailsPlaceRequestElement` | `PlaceDetailsPlaceRequestElement([options])` **Parameters:** - `options: PlaceDetailsPlaceRequestElementOptions optional` |
| ### Properties ||
|---|---|
| `place` attr: place | **Input type:** `Place|string optional` **Output type:** `Place optional` **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:** `place="places/###"` |
| ### Methods ||
|---|---|
## [PlaceDetailsPlaceRequestElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsPlaceRequestElementOptions)
interface
interface
`google.maps.places.PlaceDetailsPlaceRequestElementOptions`
implemented by `PlaceDetailsPlaceRequestElement`
Options for `PlaceDetailsPlaceRequestElement`.
| ### Properties ||
|---|---|
| `place` optional | **Type:** `Place|string optional` See `PlaceDetailsPlaceRequestElement.place` |
## [PlaceDetailsLocationRequestElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsLocationRequestElement)
class
class
`google.maps.places.PlaceDetailsLocationRequestElement`
extends `HTMLElement`
implements `PlaceDetailsLocationRequestElementOptions`
library `"places"`
Configures a `PlaceDetailsCompactElement` or `PlaceDetailsElement` to load data based on a location. Append this element as a child of a `PlaceDetailsCompactElement` or `PlaceDetailsElement` to load data for the specified location. For example:
```html
```
```javascript
const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceDetailsLocationRequestElement` | `PlaceDetailsLocationRequestElement([options])` **Parameters:** - `options: PlaceDetailsLocationRequestElementOptions optional` |
| ### Properties ||
|---|---|
| `location` attr: location | **Input type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` **Output type:** `LatLngAltitude optional` **Default:** `null` The location to render details for in the Place Details element. Normalizes to a `LatLngAltitude`. **HTML attribute:** `location="lat,lng"` |
| ### Methods ||
|---|---|
## [PlaceDetailsLocationRequestElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsLocationRequestElementOptions)
interface
interface
`google.maps.places.PlaceDetailsLocationRequestElementOptions`
implemented by `PlaceDetailsLocationRequestElement`
Options for `PlaceDetailsLocationRequestElement`.
| ### Properties ||
|---|---|
| `location` optional | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` The location to render the place for. |
## [PlaceSearchElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceSearchElement)
class
class
`google.maps.places.PlaceSearchElement`
extends `HTMLElement`
implements `PlaceSearchElementOptions`
extended by `AdvancedPlaceSearchElement`
library `"places"`
Displays the results of a place search in a list. Append a `PlaceTextSearchRequestElement` or `PlaceNearbySearchRequestElement` to specify the request to render results for. Append a `PlaceContentConfigElement`, `PlaceStandardContentElement`, or `PlaceAllContentElement` to specify which content to render.
Example:
To use the Place Search Element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {PlaceSearchElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceSearchElement` | `PlaceSearchElement([options])` **Parameters:** - `options: PlaceSearchElementOptions optional` |
| ### Properties ||
|---|---|
| `attributionPosition` attr: attribution-position | **Input type:** `PlaceSearchAttributionPosition optional` **Output type:** `PlaceSearchAttributionPosition` **Default:** `PlaceSearchAttributionPosition.TOP` The position of the attribution logo and legal disclosure button. **HTML attribute:** `attribution-position="value-name"` |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `orientation` attr: orientation | **Input type:** `PlaceSearchOrientation optional` **Output type:** `PlaceSearchOrientation` **Default:** `PlaceSearchOrientation.VERTICAL` The orientation variant (vertical or horizontal) of the element. **HTML attribute:** `orientation="value-name"` |
| `places` readonly | **Type:** `Array` Read only. Array of `Place` objects containing the IDs, locations, and viewports of the currently rendered places. |
| `selectable` attr: selectable | **Input type:** `boolean optional` **Output type:** `boolean` **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:** `selectable` |
| `truncationPreferred` attr: truncation-preferred | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` If true, truncates certain lines of content to fit on one line instead of wrapping. **HTML attribute:** `truncation-preferred` |
| ### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) for more details. Defaults to `color-scheme: light dark`. |
| `font-size` | Scales all text and icons in the element. Defaults to `16px`. |
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(event)` **Arguments:** - `event: Event optional` 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 optional` This event is fired when the element loads and renders its content. This event does not bubble. |
| `gmp-select` | `function(event)` **Arguments:** - `event: PlaceSelectEvent optional` 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. |
## [PlaceSearchElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceSearchElementOptions)
interface
interface
`google.maps.places.PlaceSearchElementOptions`
extended by `AdvancedPlaceSearchElementOptions`
implemented by `AdvancedPlaceSearchElement, PlaceSearchElement`
Options for `PlaceSearchElement`.
| ### Properties ||
|---|---|
| `attributionPosition` optional | **Type:** `PlaceSearchAttributionPosition optional` See `PlaceSearchElement.attributionPosition`. |
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
| `orientation` optional | **Type:** `PlaceSearchOrientation optional` See `PlaceSearchElement.orientation`. |
| `selectable` optional | **Type:** `boolean optional` See `PlaceSearchElement.selectable` |
| `truncationPreferred` optional | **Type:** `boolean optional` See `PlaceSearchElement.truncationPreferred`. |
## [PlaceItemElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceItemElement)
class
class
`google.maps.places.PlaceItemElement`
extends `HTMLElement`
implements `PlaceItemElementOptions`
extended by `AdvancedPlaceItemElement`
library `"places"`
Public web component wrapper (``) for place list items. The `` custom element renders an individual place result card inside ``. Each `` displays place information composed of child visual components from the Places UI Kit.
```html
```
```javascript
const {PlaceItemElement} = await google.maps.importLibrary("places");
```
| ### Methods ||
|---|---|
## [PlaceItemElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceItemElementOptions)
interface
interface
`google.maps.places.PlaceItemElementOptions`
extended by `AdvancedPlaceItemElementOptions`
implemented by `AdvancedPlaceItemElement, PlaceItemElement`
Options for `PlaceItemElement`.
## [AdvancedPlaceSearchElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceSearchElement)
class
class
`google.maps.places.AdvancedPlaceSearchElement`
extends `PlaceSearchElement, HTMLElement`
implements `AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions`
library `"places"`
Displays the results of an advanced place search in a list. Append a `PlaceTextSearchRequestElement` or `PlaceNearbySearchRequestElement` to specify the request to render results for. Append a `PlaceStandardContentElement`, `PlaceAllContentElement`, or a `` to specify which content to render.
Example:
To use the Advanced Place Search Element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `AdvancedPlaceSearchElement` | `AdvancedPlaceSearchElement([options])` **Parameters:** - `options: AdvancedPlaceSearchElementOptions optional` |
| ### Properties ||
|---|---|
| `attributionPosition` attr: attribution-position | **Input type:** `PlaceSearchAttributionPosition optional` **Output type:** `PlaceSearchAttributionPosition` **Default:** `PlaceSearchAttributionPosition.TOP` The position of the attribution logo and legal disclosure button. **HTML attribute:** `attribution-position="value-name"` |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `orientation` attr: orientation | **Input type:** `PlaceSearchOrientation optional` **Output type:** `PlaceSearchOrientation` **Default:** `PlaceSearchOrientation.VERTICAL` The orientation variant (vertical or horizontal) of the element. **HTML attribute:** `orientation="value-name"` |
| `selectable` attr: selectable | **Input type:** `boolean optional` **Output type:** `boolean` **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:** `selectable` |
| `truncationPreferred` attr: truncation-preferred | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` If true, truncates certain lines of content to fit on one line instead of wrapping. **HTML attribute:** `truncation-preferred` |
| ### Slots ||
|---|---|
| `details-item` | The HTML template which contains gmp-place widgets to render for each place in the search results. |
| ### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) for more details. Defaults to `color-scheme: light dark`. |
| `font-size` | Scales all text and icons in the element. Defaults to `16px`. |
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(event)` **Arguments:** - `event: Event optional` 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 optional` This event is fired when the element loads and renders its content. This event does not bubble. |
| `gmp-select` | `function(event)` **Arguments:** - `event: PlaceSelectEvent optional` 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. |
## [AdvancedPlaceSearchElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceSearchElementOptions)
interface
interface
`google.maps.places.AdvancedPlaceSearchElementOptions`
extends `PlaceSearchElementOptions`
implemented by `AdvancedPlaceSearchElement`
Options for `AdvancedPlaceSearchElement`.
| ### Properties ||
|---|---|
| `attributionPosition` optional | **Type:** `PlaceSearchAttributionPosition optional` See `PlaceSearchElement.attributionPosition`. |
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
| `orientation` optional | **Type:** `PlaceSearchOrientation optional` See `PlaceSearchElement.orientation`. |
| `selectable` optional | **Type:** `boolean optional` See `PlaceSearchElement.selectable` |
| `truncationPreferred` optional | **Type:** `boolean optional` See `PlaceSearchElement.truncationPreferred`. |
## [AdvancedPlaceListElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceListElement)
class
class
`google.maps.places.AdvancedPlaceListElement`
extends `HTMLElement`
implements `AdvancedPlaceListElementOptions`
library `"places"`
Displays the results of a place search in a list. Append one or more `PlaceDetailsPlaceRequestElement` or set the `places` property to specify the places to display. Append a `PlaceStandardContentElement` or `PlaceAllContentElement` to specify which content to render.
Example:
To use the Advanced Place List Element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `AdvancedPlaceListElement` | `AdvancedPlaceListElement([options])` **Parameters:** - `options: AdvancedPlaceListElementOptions optional` |
| ### Properties ||
|---|---|
| `attributionPosition` attr: attribution-position | **Input type:** `PlaceSearchAttributionPosition optional` **Output type:** `PlaceSearchAttributionPosition` **Default:** `PlaceSearchAttributionPosition.TOP` The position of the attribution logo and legal disclosure button. **HTML attribute:** `attribution-position="value-name"` |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable optional` **Output type:** `Array optional` Identifiers used to attribute calls to specific packages or OSS libraries. **HTML attribute:** `internal-usage-attribution-ids="space separated strings"` |
| `orientation` attr: orientation | **Input type:** `PlaceSearchOrientation optional` **Output type:** `PlaceSearchOrientation` **Default:** `PlaceSearchOrientation.VERTICAL` The orientation variant (vertical or horizontal) of the element. **HTML attribute:** `orientation="value-name"` |
| `places` attr: places | **Input type:** `Iterable optional` **Output type:** `Array` List of Place objects containing the IDs which should be displayed in this element. Note that all Places set in the places property might not be displayed if they could not be rendered(e.g. invalid ID, network request error, etc.). The places property can be read to retrieve the currently displayed places. **HTML attribute:** `places="space separated strings"` |
| `selectable` attr: selectable | **Input type:** `boolean optional` **Output type:** `boolean` **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:** `selectable` |
| `truncationPreferred` attr: truncation-preferred | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` If true, truncates certain lines of content to fit on one line instead of wrapping. **HTML attribute:** `truncation-preferred` |
| ### Slots ||
|---|---|
| `details-item` | The HTML template which contains gmp-place widgets to render for each place in the list. |
| ### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) for more details. Defaults to `color-scheme: light dark`. |
| `font-size` | Scales all text and icons in the element. Defaults to `16px`. |
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(event)` **Arguments:** - `event: Event optional` 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 optional` This event is fired when the element loads and renders its content. This event does not bubble. |
| `gmp-select` | `function(event)` **Arguments:** - `event: PlaceSelectEvent optional` 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. |
## [AdvancedPlaceListElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceListElementOptions)
interface
interface
`google.maps.places.AdvancedPlaceListElementOptions`
implemented by `AdvancedPlaceListElement`
Options for `AdvancedPlaceListElement`.
| ### Properties ||
|---|---|
| `attributionPosition` optional | **Type:** `PlaceSearchAttributionPosition optional` See `PlaceSearchElement.attributionPosition`. |
| `internalUsageAttributionIds` optional | **Type:** `Iterable optional` Identifiers used to attribute calls to specific packages or OSS libraries. |
| `orientation` optional | **Type:** `PlaceSearchOrientation optional` See `PlaceSearchElement.orientation`. |
| `places` optional | **Type:** `Iterable optional` See `AdvancedPlaceListElement.places`. |
| `selectable` optional | **Type:** `boolean optional` See `PlaceSearchElement.selectable` |
| `truncationPreferred` optional | **Type:** `boolean optional` See `PlaceSearchElement.truncationPreferred`. |
## [AdvancedPlaceItemElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceItemElement)
class
class
`google.maps.places.AdvancedPlaceItemElement`
extends `PlaceItemElement, HTMLElement`
implements `AdvancedPlaceItemElementOptions, PlaceItemElementOptions`
library `"places"`
Public web component wrapper (``) for advanced place list items. The `` custom element renders an individual rich place result card inside an advanced search or collection container, such as `` or ``. Each `` presents rich place details, media collages, editorial summaries, and interactive action buttons composed of child visual components from the Places UI Kit.
```html
```
```javascript
const {AdvancedPlaceItemElement} = await google.maps.importLibrary("places");
```
| ### Slots ||
|---|---|
| `basic-section-bottom` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). A slot for custom HTML content rendered at the bottom of the basic information section, directly below the main action buttons. |
| `basic-section-top` | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). A slot for custom HTML content rendered in the basic information section, directly above the place name. |
| ### Methods ||
|---|---|
## [AdvancedPlaceItemElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceItemElementOptions)
interface
interface
`google.maps.places.AdvancedPlaceItemElementOptions`
extends `PlaceItemElementOptions`
implemented by `AdvancedPlaceItemElement`
Options for `AdvancedPlaceItemElement`.
## [PlaceSearchAttributionPosition](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceSearchAttributionPosition)
constants
constants
`google.maps.places.PlaceSearchAttributionPosition`
library `"places"`
Attribution positions for `PlaceSearchElement`.
These constants are also usable as strings. In TypeScript, the string literals are defined by the `PlaceSearchAttributionPositionString` type.
```javascript
const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");
```
| ### Constants ||
|---|---|
| `BOTTOM` | Attribution at the bottom of the PlaceSearchElement |
| `TOP` | Attribution at the top of the PlaceSearchElement |
## [PlaceSearchOrientation](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceSearchOrientation)
constants
constants
`google.maps.places.PlaceSearchOrientation`
library `"places"`
Orientation variants for `PlaceSearchElement`.
These constants are also usable as strings. In TypeScript, the string literals are defined by the `PlaceSearchOrientationString` type.
```javascript
const {PlaceSearchOrientation} = await google.maps.importLibrary("places");
```
| ### Constants ||
|---|---|
| `HORIZONTAL` | Horizontal orientation. |
| `VERTICAL` | Vertical orientation. |
## [PlaceSelectEvent](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceSelectEvent)
class
class
`google.maps.places.PlaceSelectEvent`
extends `Event`
library `"places"`
This event fires when a place is selected from a list of places. Access the selection with `event.place`.
```javascript
const {PlaceSelectEvent} = await google.maps.importLibrary("places");
```
| ### Properties ||
|---|---|
| `place` readonly | **Type:** `Place` The selected place. |
## [PlaceNearbySearchRequestElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceNearbySearchRequestElement)
class
class
`google.maps.places.PlaceNearbySearchRequestElement`
extends `HTMLElement`
implements `PlaceNearbySearchRequestElementOptions`
library `"places"`
Configures a `PlaceSearchElement` to load results based on a nearby search request. The `locationRestriction` property is required for the search element to load. Any other configured properties will be ignored if `locationRestriction` is not set. Append this element as a child of a `PlaceSearchElement` to load results. For example:
```html
```
```javascript
const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceNearbySearchRequestElement` | `PlaceNearbySearchRequestElement([options])` **Parameters:** - `options: PlaceNearbySearchRequestElementOptions optional` |
| ### Properties ||
|---|---|
| `excludedPrimaryTypes` attr: excluded-primary-types | **Input type:** `Array optional` **Output type:** `Array optional` **Default:** `null` Excluded primary place types. **HTML attribute:** `excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."` |
| `excludedTypes` attr: excluded-types | **Input type:** `Array optional` **Output type:** `Array optional` **Default:** `null` Excluded place types. **HTML attribute:** `excluded-types="excluded-type1 excluded-type2..."` |
| `futureOpeningBusinessesIncluded` | **Input type:** `boolean optional` **Output type:** `boolean optional` Include place predictions for businesses that are not yet open but are expected to open in the future. |
| `includedPrimaryTypes` attr: included-primary-types | **Input type:** `Array optional` **Output type:** `Array optional` **Default:** `null` Included primary place type. **HTML attribute:** `included-primary-types="included-primary-type1 included-primary-type2..."` |
| `includedTypes` attr: included-types | **Input type:** `Array optional` **Output type:** `Array optional` **Default:** `null` Included place type. **HTML attribute:** `included-types="included-type1 included-type2..."` |
| `locationRestriction` attr: location-restriction | **Input type:** `Circle|CircleLiteral optional` **Output type:** `Circle optional` **Default:** `null` The region to search. Normalizes to a `Circle`. **HTML attribute:** `location-restriction="radius@lat,lng"` |
| `maxResultCount` attr: max-result-count | **Input type:** `number optional` **Output type:** `number optional` **Default:** `null` Maximum number of results to return. **HTML attribute:** `max-result-count="number"` |
| `rankPreference` attr: rank-preference | **Input type:** `SearchNearbyRankPreference optional` **Output type:** `SearchNearbyRankPreference optional` **Default:** `null` How results will be ranked in the response. **HTML attribute:** `rank-preference="value-name"` |
| ### Methods ||
|---|---|
## [PlaceNearbySearchRequestElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceNearbySearchRequestElementOptions)
interface
interface
`google.maps.places.PlaceNearbySearchRequestElementOptions`
implemented by `PlaceNearbySearchRequestElement`
Options for `PlaceNearbySearchRequestElement`.
| ### Properties ||
|---|---|
| `excludedPrimaryTypes` optional | **Type:** `Array optional` Excluded primary place types. See `PlaceNearbySearchRequestElement.excludedPrimaryTypes` and `SearchNearbyRequest.excludedPrimaryTypes` for more details. |
| `excludedTypes` optional | **Type:** `Array optional` Excluded place types. See `PlaceNearbySearchRequestElement.excludedTypes` and `SearchNearbyRequest.excludedTypes` for more details. |
| `futureOpeningBusinessesIncluded` optional | **Type:** `boolean optional` Include place predictions for businesses that are not yet open but are expected to open in the future. |
| `includedPrimaryTypes` optional | **Type:** `Array optional` Included primary place types. See `PlaceNearbySearchRequestElement.includedPrimaryTypes` and `SearchNearbyRequest.includedPrimaryTypes` for more details. |
| `includedTypes` optional | **Type:** `Array optional` Included place types. See `PlaceNearbySearchRequestElement.includedTypes` and `SearchNearbyRequest.includedTypes` for more details. |
| `locationRestriction` optional | **Type:** `Circle|CircleLiteral optional` The region to search. See `PlaceNearbySearchRequestElement.locationRestriction` and `SearchNearbyRequest.locationRestriction` for more details. |
| `maxResultCount` optional | **Type:** `number optional` Maximum number of results to return. See `PlaceNearbySearchRequestElement.maxResultCount` and `SearchNearbyRequest.maxResultCount` for more details. |
| `rankPreference` optional | **Type:** `SearchNearbyRankPreference optional` How results will be ranked in the response. See `PlaceNearbySearchRequestElement.rankPreference` and `SearchNearbyRankPreference` for more details. |
## [PlaceTextSearchRequestElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceTextSearchRequestElement)
class
class
`google.maps.places.PlaceTextSearchRequestElement`
extends `HTMLElement`
implements `PlaceTextSearchRequestElementOptions`
library `"places"`
Configures a `PlaceSearchElement` to load results based on a text search request. The `textQuery` property is required for the search element to load. Any other configured properties will be ignored if `textQuery` is not set. Append this element as a child of a `PlaceSearchElement` to load results. For example:
```html
```
```javascript
const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceTextSearchRequestElement` | `PlaceTextSearchRequestElement([options])` **Parameters:** - `options: PlaceTextSearchRequestElementOptions optional` |
| ### Properties ||
|---|---|
| `evConnectorTypes` attr: ev-connector-types | **Input type:** `Array optional` **Output type:** `Array optional` **Default:** `null` The list of preferred EV connector types. **HTML attribute:** `ev-connector-types="ev-connector-type1 ev-connector-type2..."` |
| `evMinimumChargingRateKw` attr: ev-minimum-charging-rate-kw | **Input type:** `number optional` **Output type:** `number optional` **Default:** `null` Minimum required charging rate in kilowatts. **HTML attribute:** `ev-minimum-charging-rate-kw="number"` |
| `futureOpeningBusinessesIncluded` | **Input type:** `boolean optional` **Output type:** `boolean optional` Include place predictions for businesses that are not yet open but are expected to open in the future. |
| `includedType` attr: included-type | **Input type:** `string optional` **Output type:** `string optional` **Default:** `null` The requested place type. **HTML attribute:** `included-type="type"` |
| `isOpenNow` attr: is-open-now | **Input type:** `boolean optional` **Output type:** `boolean optional` **Default:** `null` Used to restrict the search to places that are currently open. **HTML attribute:** `is-open-now` |
| `locationBias` attr: location-bias | **Input type:** `LocationBias optional` **Output type:** `LatLngAltitude|LatLngBounds|Circle|string optional` **Default:** `null` Location bias for the search. **HTML attribute:** - `location-bias="lat,lng"` - `location-bias="lat,lng[,altitude]"` - `location-bias="swlat,swlng|nelat,nelng"` - `location-bias="radius@lat,lng"` - `location-bias="IP_BIAS"` |
| `locationRestriction` attr: location-restriction | **Input type:** `LatLngBounds|LatLngBoundsLiteral optional` **Output type:** `LatLngBounds optional` **Default:** `null` Location restriction for the search. Normalizes to a `LatLngBounds`. **HTML attribute:** `location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng"` |
| `maxResultCount` attr: max-result-count | **Input type:** `number optional` **Output type:** `number optional` **Default:** `null` Maximum number of results to return. **HTML attribute:** `max-result-count="number"` |
| `minRating` attr: min-rating | **Input type:** `number optional` **Output type:** `number optional` **Default:** `null` Filter out results whose average user rating is strictly less than this limit. **HTML attribute:** `min-rating="number"` |
| `priceLevels` attr: price-levels | **Input type:** `Array optional` **Output type:** `Array optional` **Default:** `null` Used to restrict the search to places that are marked as certain price levels. **HTML attribute:** `price-levels="price-level1 price-level2..."` |
| `rankPreference` attr: rank-preference | **Input type:** `SearchByTextRankPreference optional` **Output type:** `SearchByTextRankPreference optional` **Default:** `null` How results will be ranked in the response. **HTML attribute:** `rank-preference="value-name"` |
| `textQuery` attr: text-query | **Input type:** `string optional` **Output type:** `string optional` **Default:** `null` The text query for textual search. **HTML attribute:** `text-query="string"` |
| `useStrictTypeFiltering` attr: use-strict-type-filtering | **Input type:** `boolean optional` **Output type:** `boolean optional` **Default:** `null` Used to set strict type filtering for 'includedType'. **HTML attribute:** `use-strict-type-filtering` |
| ### Methods ||
|---|---|
## [PlaceTextSearchRequestElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceTextSearchRequestElementOptions)
interface
interface
`google.maps.places.PlaceTextSearchRequestElementOptions`
implemented by `PlaceTextSearchRequestElement`
Options for `PlaceTextSearchRequestElement`.
| ### Properties ||
|---|---|
| `evConnectorTypes` optional | **Type:** `Array optional` The list of preferred EV connector types. See `SearchByTextRequest.evSearchOptions` and `PlaceTextSearchRequestElement.evConnectorTypes` for more details. |
| `evMinimumChargingRateKw` optional | **Type:** `number optional` Minimum required charging rate in kilowatts. See `SearchByTextRequest.evSearchOptions` and `PlaceTextSearchRequestElement.evMinimumChargingRateKw` for more details. |
| `futureOpeningBusinessesIncluded` optional | **Type:** `boolean optional` Include place predictions for businesses that are not yet open but are expected to open in the future. |
| `includedType` optional | **Type:** `string optional` The requested place type. See `SearchByTextRequest.includedType` and `PlaceTextSearchRequestElement.includedType` for more details. |
| `isOpenNow` optional | **Type:** `boolean optional` Used to restrict the search to places that are currently open. See `SearchByTextRequest.isOpenNow` and `PlaceTextSearchRequestElement.isOpenNow` for more details. |
| `locationBias` optional | **Type:** `LocationBias optional` Location bias for the search. See `SearchByTextRequest.locationBias` and `PlaceTextSearchRequestElement.locationBias` for more details. |
| `locationRestriction` optional | **Type:** `LatLngBounds|LatLngBoundsLiteral optional` Location restriction for the search. See `SearchByTextRequest.locationRestriction` and `PlaceTextSearchRequestElement.locationRestriction` for more details. |
| `maxResultCount` optional | **Type:** `number optional` Maximum number of results to return. See `SearchByTextRequest.maxResultCount` and `PlaceTextSearchRequestElement.maxResultCount` for more details. |
| `minRating` optional | **Type:** `number optional` Filter out results whose average user rating is strictly less than this limit. See `SearchByTextRequest.minRating` and `PlaceTextSearchRequestElement.minRating` for more details. |
| `priceLevels` optional | **Type:** `Array optional` Used to restrict the search to places that are marked as certain price levels. See `SearchByTextRequest.priceLevels` and `PlaceTextSearchRequestElement.priceLevels` for more details. |
| `rankPreference` optional | **Type:** `SearchByTextRankPreference optional` How results will be ranked in the response. See `SearchByTextRequest.rankPreference` and `PlaceTextSearchRequestElement.rankPreference` for more details. |
| `textQuery` optional | **Type:** `string optional` The text query for textual search. See `SearchByTextRequest.textQuery` and `PlaceTextSearchRequestElement.textQuery` for more details. |
| `useStrictTypeFiltering` optional | **Type:** `boolean optional` Used to set strict type filtering for `SearchByTextRequest.includedType`. See `SearchByTextRequest.useStrictTypeFiltering` and `PlaceTextSearchRequestElement.useStrictTypeFiltering` for more details. |
## [Autocomplete](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#Autocomplete)
class
class
`google.maps.places.Autocomplete`
extends `MVCObject`
library `"places"`
> [!WARNING]
> **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** As of March 1st, 2025, google.maps.places.Autocomplete is not available to new customers. Please use `PlaceAutocompleteElement` instead. At this time, google.maps.places.Autocomplete is not scheduled to be discontinued, but `PlaceAutocompleteElement` 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 see for additional details and for the migration guide.
A widget that provides Place predictions based on a user's text input. It attaches to an input element of type `text`, 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.
```javascript
const {Autocomplete} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `Autocomplete` | `Autocomplete(inputField[, opts])` **Parameters:** - `inputField: HTMLInputElement` The `` text field to which the `Autocomplete` should be attached. - `opts: AutocompleteOptions optional` 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|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|LatLngBoundsLiteral optional` 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: ComponentRestrictions optional` 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 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: AutocompleteOptions optional` **Return Value:** None |
| `setTypes` | `setTypes(types)` **Parameters:** - `types: Array 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](https://developers.google.com/maps/documentation/javascript/places-autocomplete#constrain-place-types). If no types are specified, all types will be returned. |
| ### 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. |
## [AutocompleteOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AutocompleteOptions)
interface
interface
`google.maps.places.AutocompleteOptions`
The options that can be set on an `Autocomplete` object.
| ### Properties ||
|---|---|
| `bounds` optional | **Type:** `LatLngBounds|LatLngBoundsLiteral optional` The area in which to search for places. |
| `componentRestrictions` optional | **Type:** `ComponentRestrictions optional` The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country. |
| `fields` optional | **Type:** `Array optional` Fields to be included for the Place in the details response when the details are successfully retrieved, [which will be billed for](https://developers.google.com/maps/billing/understanding-cost-of-use#places-product). 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']`. |
| `[placeIdOnly](https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions.placeIdOnly)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** `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:** `boolean optional` 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. |
| `strictBounds` optional | **Type:** `boolean optional` 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. |
| `types` optional | **Type:** `Array optional` The types of predictions to be returned. For supported types, see the [developer's guide](https://developers.google.com/maps/documentation/javascript/places-autocomplete#constrain-place-types). If no types are specified, all types will be returned. |
## [SearchBox](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#SearchBox)
class
class
`google.maps.places.SearchBox`
extends `MVCObject`
library `"places"`
> [!WARNING]
> **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** 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 see for additional details.
A widget that provides query predictions based on a user's text input. It attaches to an input element of type `text`, 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.
```javascript
const {SearchBox} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `SearchBox` | `SearchBox(inputField[, opts])` **Parameters:** - `inputField: HTMLInputElement` - `opts: SearchBoxOptions optional` 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|undefined` Returns the query selected by the user to be used with `places_changed` event. |
| `setBounds` | `setBounds(bounds)` **Parameters:** - `bounds: LatLngBounds|LatLngBoundsLiteral optional` **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. |
| ### Events ||
|---|---|
| `places_changed` | `function()` **Arguments:** None This event is fired when the user selects a query, `getPlaces` should be used to get new places. |
## [SearchBoxOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#SearchBoxOptions)
interface
interface
`google.maps.places.SearchBoxOptions`
The options that can be set on a `SearchBox` object.
| ### Properties ||
|---|---|
| `bounds` optional | **Type:** `LatLngBounds|LatLngBoundsLiteral optional` The area towards which to bias query predictions. Predictions are biased towards, but not restricted to, queries targeting these bounds. |
## [PlaceContextualElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceContextualElement)
class
class
`google.maps.places.PlaceContextualElement`
extends `HTMLElement`
implements `PlaceContextualElementOptions`
library `"places"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
A widget that uses the context token to display a contextual view of the Grounding with Google Maps response.
```html
```
```javascript
const {PlaceContextualElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceContextualElement` | `PlaceContextualElement([options])` **Parameters:** - `options: PlaceContextualElementOptions optional` |
| ### Properties ||
|---|---|
| `contextToken` attr: context-token | **Input type:** `string optional` **Output type:** `string optional` The context token. **HTML attribute:** `context-token="string"` |
| ### Methods ||
|---|---|
## [PlaceContextualElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceContextualElementOptions)
interface
interface
`google.maps.places.PlaceContextualElementOptions`
implemented by `PlaceContextualElement`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
Options for `PlaceContextualElement`.
| ### Properties ||
|---|---|
| `contextToken` optional | **Type:** `string optional` The context token provided by the Grounding with Google Maps response. |
## [PlaceContextualListConfigElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceContextualListConfigElement)
class
class
`google.maps.places.PlaceContextualListConfigElement`
extends `HTMLElement`
implements `PlaceContextualListConfigElementOptions`
library `"places"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
An HTML element that configures options for the Place Contextual Element's list view.
```html
```
```javascript
const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlaceContextualListConfigElement` | `PlaceContextualListConfigElement([options])` **Parameters:** - `options: PlaceContextualListConfigElementOptions optional` |
| ### Properties ||
|---|---|
| `layout` attr: layout | **Input type:** `PlaceContextualListLayout optional` **Output type:** `PlaceContextualListLayout` The layout. **HTML attribute:** `layout="value-name"` |
| `mapHidden` attr: map-hidden | **Input type:** `boolean optional` **Output type:** `boolean` Whether the map is hidden. **HTML attribute:** `map-hidden` |
| ### Methods ||
|---|---|
## [PlaceContextualListConfigElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceContextualListConfigElementOptions)
interface
interface
`google.maps.places.PlaceContextualListConfigElementOptions`
implemented by `PlaceContextualListConfigElement`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
Options for PlaceContextualListConfigElement.
| ### Properties ||
|---|---|
| `layout` optional | **Type:** `PlaceContextualListLayout optional` **Default:** `PlaceContextualListLayout.VERTICAL` The layout. |
| `mapHidden` optional | **Type:** `boolean optional` **Default:** `false` True if the map should be hidden. |
## [PlaceContextualListLayout](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceContextualListLayout)
constants
constants
`google.maps.places.PlaceContextualListLayout`
library `"places"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
The list of layouts that the Place Contextual Element supports for the list view.
These constants are also usable as strings. In TypeScript, the string literals are defined by the `PlaceContextualListLayoutString` type.
```javascript
const {PlaceContextualListLayout} = await google.maps.importLibrary("places");
```
| ### 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. |
## [PlacePinElement](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlacePinElement)
class
class
`google.maps.places.PlacePinElement`
extends `HTMLElement`
implements `PlacePinElementOptions`
library `"places"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
Displays a map pin for a place, using the place's category icon or photo. Append a `PlaceDetailsPlaceRequestElement` or `PlaceDetailsLocationRequestElement` to specify the place. Use the pin as the content of an `AdvancedMarkerElement`. Not supported in 3D maps.
Example:
To use this element, enable the [Places UI Kit API](https://console.cloud.google.com/marketplace/product/google/placewidgets.googleapis.com) for your project in the Google Cloud console.
```html
```
```javascript
const {PlacePinElement} = await google.maps.importLibrary("places");
```
| ### Constructor ||
|---|---|
| `PlacePinElement` | `PlacePinElement([options])` **Parameters:** - `options: PlacePinElementOptions optional` |
| ### Properties ||
|---|---|
| `icon` attr: icon | **Input type:** `PlacePinIcon optional` **Output type:** `PlacePinIcon` **Default:** `PlacePinIcon.TYPE` The icon shown inside the pin. See `PlacePinIcon`. **HTML attribute:** `icon="value-name"` |
| `photoRendered` readonly | **Type:** `boolean` Read only. True if the pin is showing the place's photo. Always false if `icon` isn't `PHOTO`. If `icon` is `PHOTO` but the place has no photo, or the photo failed to load, this is false and the pin shows the place type icon instead. Set before `gmp-load` fires. |
| `place` readonly | **Type:** `Place optional` Read only. Place object containing the ID, location, and viewport of the currently rendered place. `undefined` if the place hasn't loaded yet or failed to load. |
| `scale` attr: scale | **Input type:** `number optional` **Output type:** `number` **Default:** `1` Size multiplier for the pin. **HTML attribute:** `scale="number"` |
| ### Slots ||
|---|---|
| `default` | Optional content shown on the pin, such as a `PlaceRatingElement`, a custom ``, or text. Light DOM children are slotted directly into the pin. Where the content is shown depends on `icon`: next to the place type icon for `TYPE`, as a badge on the photo for `PHOTO`, and as the pin's main content for `NONE`. |
| ### CSS Properties ||
|---|---|
| `--gmp-background` | Background color of the pin: the pill, the photo frame, the photo badge, the beak, and the border of the place type pin. |
| `--gmp-border-radius` | Border radius of the pill (place type icon with slotted content, or slotted content alone) and of the photo frame in `PHOTO` pins. Defaults to `30px` for a place type icon with slotted content, `12px` for slotted content alone, and a `12px` photo frame. Doesn't apply to the place type pin without slotted content. |
| `--gmp-glyph-background` | Background color behind the place type glyph. Defaults to the place's `iconBackgroundColor`. |
| `--gmp-glyph-color` | Color of the place type glyph. Applies whenever the glyph is shown, including when a `PHOTO` pin falls back to the place type icon. |
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-error` | `function(event)` **Arguments:** - `event: Event optional` This event is fired when the pin can't be rendered at all, for example because of a network failure, a credential failure (such as an incorrect API key), a Place ID that can't be resolved, or a place with no location. The pin is hidden. This event does not bubble. |
| `gmp-load` | `function(event)` **Arguments:** - `event: Event optional` This event is fired once the place details have loaded and the pin has rendered. When `icon` is `PHOTO`, it fires only after the photo has either loaded or failed; a photo failure alone doesn't fire `gmp-error`. Read the loaded place from `PlacePinElement.place` and whether the photo is shown from `PlacePinElement.photoRendered`. This event does not bubble. |
## [PlacePinElementOptions](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlacePinElementOptions)
interface
interface
`google.maps.places.PlacePinElementOptions`
implemented by `PlacePinElement`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
Options for constructing a `PlacePinElement`.
| ### Properties ||
|---|---|
| `icon` optional | **Type:** `PlacePinIcon optional` See `PlacePinElement.icon`. |
| `scale` optional | **Type:** `number optional` See `PlacePinElement.scale`. |
## [PlacePinIcon](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlacePinIcon)
constants
constants
`google.maps.places.PlacePinIcon`
library `"places"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
Icon options for `PlacePinElement`. `TYPE` is the default. If the data needed for the selected icon is missing, the pin falls back to `TYPE`. If the data needed for `TYPE` is missing, a generic icon is shown instead.
These constants are also usable as strings. In TypeScript, the string literals are defined by the `PlacePinIconString` type.
```javascript
const {PlacePinIcon} = await google.maps.importLibrary("places");
```
| ### Constants ||
|---|---|
| `NONE` | Shows no icon, only the slotted content. |
| `PHOTO` | Shows the place's photo in a circle. Falls back to `TYPE` if the place has no photo. |
| `TYPE` | Shows the place's category icon. |