Places Widgets

PlaceAutocompleteElement class

google.maps.places.PlaceAutocompleteElement class

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

This class extends HTMLElement.

This class implements PlaceAutocompleteElementOptions.

Access by calling const {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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

Properties
`includedPrimaryTypes`	Type: `Array<string> optional` Included primary Place type (for example, "restaurant" or "gas_station"). A Place is only returned if its primary type is included in this list. Up to 5 values can be specified. If no types are specified, all Place types are returned. HTML attribute: `<gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>`
`includedRegionCodes`	Type: `Array<string> optional` Only include results in the specified regions, specified as up to 15 CLDR two-character region codes. An empty set will not restrict the results. If both `locationRestriction` and `includedRegionCodes` are set, the results will be located in the area of intersection. HTML attribute: `<gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>`
`locationBias`	Type: `LocationBias optional` A soft boundary or hint to use when searching for places.
`locationRestriction`	Type: `LocationRestriction optional` Bounds to constrain search results.
`name`	Type: `string optional` The name to be used for the input element. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name for details. Follows the same behavior as the name attribute for inputs. Note that this is the name that will be used when a form is submitted. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form for details. HTML attribute: `<gmp-place-autocomplete name="string"></gmp-place-autocomplete>`
`origin`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral 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: `<gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>` `<gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>`
`placeholder`	Type: `string` The placeholder text to display in the input element.
`requestedLanguage`	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. HTML attribute: `<gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>`
`requestedRegion`	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") two-character value. Most ccTLD codes are identical to ISO 3166-1 codes, with some notable exceptions. For example, the United Kingdom's ccTLD is "uk" (`.co.uk`) while its ISO 3166-1 code is "gb" (technically for the entity of "The United Kingdom of Great Britain and Northern Ireland"). HTML attribute: `<gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>`
`unitSystem`	Type: `UnitSystem optional` The unit system used to display distances. If not specified, the unit system is determined by requestedRegion. HTML attribute: `<gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>` `<gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>`
`value`	Type: `string` The value of the input element.

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

Parts
`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 may be anywhere within prediction-item. It is not necessarily part of prediction-item-main-text.
`prediction-item-selected`	The item when the user navigates to it via the keyboard. Note: Selected items will be affected by both this part styles and also the prediction-item part styles.
`prediction-list`	The visual element containing the list of predictions returned by the Place Autocomplete service. This list appears as a dropdown list below the PlaceAutocompleteElement.

CSS Properties
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color`	Overrides the font of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See `color-scheme` documentation for more details. Defaults to `color-scheme: light dark`.
`font`	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
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptions optional` See options. Custom events only support `capture` and `passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptions optional` See options. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

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

Events

gmp-error

function(errorEvent)

Arguments:

errorEvent: Event

This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.

gmp-select

function(placePredictionSelectEvent)

Arguments:

placePredictionSelectEvent: PlacePredictionSelectEvent

This event is fired when a user selects a place prediction. Contains a PlacePrediction object which can be converted to a Place object.

PlaceAutocompleteElementOptions interface

google.maps.places.PlaceAutocompleteElementOptions interface

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

Properties
`includedPrimaryTypes optional`	Type: `Array<string> optional`
`includedRegionCodes optional`	Type: `Array<string> optional`
`locationBias optional`	Type: `LocationBias optional`
`locationRestriction optional`	Type: `LocationRestriction optional`
`name optional`	Type: `string optional`
`origin optional`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral 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.

BasicPlaceAutocompleteElement class

google.maps.places.BasicPlaceAutocompleteElement class

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

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

This class extends HTMLElement.

This class implements BasicPlaceAutocompleteElementOptions.

Access by calling const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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

Properties
`includedPrimaryTypes`	Type: `Array<string> optional` Included primary Place type (for example, "restaurant" or "gas_station"). A Place is only returned if its primary type is included in this list. Up to 5 values can be specified. If no types are specified, all Place types are returned. HTML attribute: `<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-basic-place-autocomplete>`
`includedRegionCodes`	Type: `Array<string> optional` Only include results in the specified regions, specified as up to 15 CLDR two-character region codes. An empty set will not restrict the results. If both `locationRestriction` and `includedRegionCodes` are set, the results will be located in the area of intersection. HTML attribute: `<gmp-basic-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-basic-place-autocomplete>`
`locationBias`	Type: `LocationBias optional` A soft boundary or hint to use when searching for places.
`locationRestriction`	Type: `LocationRestriction optional` Bounds to constrain search results.
`name`	Type: `string optional` The name to be used for the input element. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name for details. Follows the same behavior as the name attribute for inputs. Note that this is the name that will be used when a form is submitted. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form for details. HTML attribute: `<gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>`
`origin`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral 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: `<gmp-basic-place-autocomplete origin="lat,lng"></gmp-basic-place-autocomplete>` `<gmp-basic-place-autocomplete origin="lat,lng,altitude"></gmp-basic-place-autocomplete>`
`requestedLanguage`	Type: `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. HTML attribute: `<gmp-basic-place-autocomplete requested-language="string"></gmp-basic-place-autocomplete>`
`requestedRegion`	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") two-character value. Most ccTLD codes are identical to ISO 3166-1 codes, with some notable exceptions. For example, the United Kingdom's ccTLD is "uk" (`.co.uk`) while its ISO 3166-1 code is "gb" (technically for the entity of "The United Kingdom of Great Britain and Northern Ireland"). HTML attribute: `<gmp-basic-place-autocomplete requested-region="string"></gmp-basic-place-autocomplete>`
`unitSystem`	Type: `UnitSystem optional` The unit system used to display distances. If not specified, the unit system is determined by requestedRegion. HTML attribute: `<gmp-basic-place-autocomplete unit-system="metric"></gmp-basic-place-autocomplete>` `<gmp-basic-place-autocomplete unit-system="imperial"></gmp-basic-place-autocomplete>`

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

Parts
`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 may be anywhere within prediction-item. It is not necessarily part of prediction-item-main-text.
`prediction-item-selected`	The item when the user navigates to it via the keyboard. Note: Selected items will be affected by both this part styles and also the prediction-item part styles.
`prediction-list`	The visual element containing the list of predictions returned by the Place Autocomplete service. This list appears as a dropdown list below the PlaceAutocompleteElement.

CSS Properties
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color`	Overrides the font of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See `color-scheme` documentation for more details. Defaults to `color-scheme: light dark`.
`font`	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
`addEventListener`	`addEventListener(type, listener[, options])` Parameters: `type`: `string` A case-sensitive string representing the event type to listen for. `listener`: `EventListener\|EventListenerObject` The object that receives a notification. This must be a function or an object with the handleEvent method `options`: `boolean\|AddEventListenerOptions optional` See options. Custom events only support `capture` and `passive`. Return Value: `void` Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptions optional` See options. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

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

Events

gmp-error

function(errorEvent)

Arguments:

errorEvent: Event

This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.

gmp-select

function(placeSelectEvent)

Arguments:

placeSelectEvent: PlaceSelectEvent

This event is fired when a user selects a place prediction. Contains a Place object.

PlaceDetailsElement class

google.maps.places.PlaceDetailsElement class

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

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

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

This class extends HTMLElement.

This class implements PlaceDetailsElementOptions.

Access by calling const {PlaceDetailsElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceDetailsElement`	`PlaceDetailsElement([options])` Parameters: `options`: `PlaceDetailsElementOptions optional`

Properties
`place`	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 bage.
`--gmp-mat-font-title-small`	Used for the title of each section in the 'About' tab.
`--gmp-mat-spacing-extra-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-extra-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-medium`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-small`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-mat-spacing-two-extra-large`	Used for spacing within the element, such as the margin and padding around text.
`--gmp-star-rating-color`	Color of the filled stars in the rating.
`background-color`	Overrides the background color of the element.
`border`	Overrides the border of the element.
`border-radius`	Overrides the border radius of the element.
`color-scheme`	Indicates which color scheme this element can be rendered in. See `color-scheme` documentation for more details. Defaults to `color-scheme: light dark`.
`font-size`	Scales all text and icons in the element, which are defined internally in ems. Defaults to `16px`.

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

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

Events

gmp-error

function(event)

Arguments:

event: Event

This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.

gmp-load

function(event)

Arguments:

event: Event

This event is fired when the element loads and renders its content. This event does not bubble.

PlaceDetailsElementOptions interface

google.maps.places.PlaceDetailsElementOptions interface

Options for PlaceDetailsElement.

PlaceDetailsCompactElement class

google.maps.places.PlaceDetailsCompactElement class

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

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

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

This class extends HTMLElement.

This class implements PlaceDetailsCompactElementOptions.

Access by calling const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceDetailsCompactElement`	`PlaceDetailsCompactElement([options])` Parameters: `options`: `PlaceDetailsCompactElementOptions optional`

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

Properties

orientation

Type: PlaceDetailsOrientation optional

Default: PlaceDetailsOrientation.VERTICAL

The orientation variant (vertical or horizontal) of the element.

HTML attribute:

<gmp-place-details-compact orientation="vertical"></gmp-place-details-compact>
<gmp-place-details-compact orientation="horizontal"></gmp-place-details-compact>

place

Type: Place optional

Read only. Place object containing the ID, location, and viewport of the currently rendered place.

truncationPreferred

Type: boolean

Default: false

If true, truncates the place name and address to fit on one line instead of wrapping.

HTML attribute:

<gmp-place-details-compact truncation-preferred></gmp-place-details-compact>

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

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

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

Events

gmp-error

function(event)

Arguments:

event: Event

This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.

gmp-load

function(event)

Arguments:

event: Event

This event is fired when the element loads and renders its content. This event does not bubble.

PlaceDetailsPlaceRequestElement class

google.maps.places.PlaceDetailsPlaceRequestElement class

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:

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

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

This class extends HTMLElement.

This class implements PlaceDetailsPlaceRequestElementOptions.

Access by calling const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceDetailsPlaceRequestElement`	`PlaceDetailsPlaceRequestElement([options])` Parameters: `options`: `PlaceDetailsPlaceRequestElementOptions optional`

Properties
`place`	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: `<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>`

Properties

place

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:

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

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

PlaceDetailsLocationRequestElement class

google.maps.places.PlaceDetailsLocationRequestElement class

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:

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

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

This class extends HTMLElement.

This class implements PlaceDetailsLocationRequestElementOptions.

Access by calling const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceDetailsLocationRequestElement`	`PlaceDetailsLocationRequestElement([options])` Parameters: `options`: `PlaceDetailsLocationRequestElementOptions optional`

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

Properties

location

Type: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional

Default: null

The location to render details for in the Place Details element. Normalizes to a LatLngAltitude.

HTML attribute:

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

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

PlaceSearchElement class

google.maps.places.PlaceSearchElement class

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

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

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

This class extends HTMLElement.

This class implements PlaceSearchElementOptions.

Access by calling const {PlaceSearchElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceSearchElement`	`PlaceSearchElement([options])` Parameters: `options`: `PlaceSearchElementOptions optional`

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

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

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

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

Events

gmp-error

function(event)

Arguments:

event: Event

This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.

gmp-load

function(event)

Arguments:

event: Event

This event is fired when the element loads and renders its content. This event does not bubble.

gmp-select

function(event)

Arguments:

event: PlaceSelectEvent

This event is fired when a place is selected from the list. Contains a Place object containing the ID, location, and viewport of the selected place.

PlaceSearchAttributionPosition constants

google.maps.places.PlaceSearchAttributionPosition constants

Attribution positions for PlaceSearchElement.

Access by calling const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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

PlaceSearchOrientation constants

google.maps.places.PlaceSearchOrientation constants

Orientation variants for PlaceSearchElement.

Access by calling const {PlaceSearchOrientation} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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

PlaceSelectEvent class

google.maps.places.PlaceSelectEvent class

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

This class extends Event.

Access by calling const {PlaceSelectEvent} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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

PlaceNearbySearchRequestElement class

google.maps.places.PlaceNearbySearchRequestElement class

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:

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

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

This class extends HTMLElement.

This class implements PlaceNearbySearchRequestElementOptions.

Access by calling const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceNearbySearchRequestElement`	`PlaceNearbySearchRequestElement([options])` Parameters: `options`: `PlaceNearbySearchRequestElementOptions optional`

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

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

PlaceTextSearchRequestElement class

google.maps.places.PlaceTextSearchRequestElement class

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:

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

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

This class extends HTMLElement.

This class implements PlaceTextSearchRequestElementOptions.

Access by calling const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceTextSearchRequestElement`	`PlaceTextSearchRequestElement([options])` Parameters: `options`: `PlaceTextSearchRequestElementOptions optional`

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

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

Autocomplete class

google.maps.places.Autocomplete class

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.

This class extends MVCObject.

Access by calling const {Autocomplete} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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

Constructor

Autocomplete

Autocomplete(inputField[, opts])

Parameters:

inputField: HTMLInputElement The <input> 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<string>\|undefined` Returns the fields to be included for the Place in the details response when the details are successfully retrieved. For a list of fields see `PlaceResult`.
`getPlace`	`getPlace()` Parameters: None Return Value: `PlaceResult` The Place selected by the user. Returns the details of the Place selected by user if the details were successfully retrieved. Otherwise returns a stub Place object, with the `name` property set to the current value of the input field.
`setBounds`	`setBounds(bounds)` Parameters: `bounds`: `LatLngBounds\|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<string> optional` Return Value: None Sets the fields to be included for the Place in the details response when the details are successfully retrieved. For a list of fields see `PlaceResult`.
`setOptions`	`setOptions(options)` Parameters: `options`: `AutocompleteOptions optional` Return Value: None
`setTypes`	`setTypes(types)` Parameters: `types`: `Array<string> optional` The types of predictions to be included. Return Value: None Sets the types of predictions to be returned. For supported types, see the developer's guide. If no types are specified, all types will be returned.
Inherited: `addListener`, `bindTo`, `get`, `notify`, `set`, `setValues`, `unbind`, `unbindAll`

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

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 interface

google.maps.places.AutocompleteOptions interface

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<string> optional` Fields to be included for the Place in the details response when the details are successfully retrieved, which will be billed for. If `['ALL']` is passed in, all available fields will be returned and billed for (this is not recommended for production deployments). For a list of fields see `PlaceResult`. Nested fields can be specified with dot-paths (for example, `"geometry.location"`). The default is `['ALL']`.
`placeIdOnly optional`	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<string> optional` The types of predictions to be returned. For supported types, see the developer's guide. If no types are specified, all types will be returned.

google.maps.places.SearchBox class

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.

This class extends MVCObject.

Access by calling const {SearchBox} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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.

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<PlaceResult>\|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.
Inherited: `addListener`, `bindTo`, `get`, `notify`, `set`, `setValues`, `unbind`, `unbindAll`

places_changed

function()

Arguments: None

This event is fired when the user selects a query, getPlaces should be used to get new places.

SearchBoxOptions interface

google.maps.places.SearchBoxOptions interface

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 class

google.maps.places.PlaceContextualElement class

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

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

This class extends HTMLElement.

This class implements PlaceContextualElementOptions.

Access by calling const {PlaceContextualElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceContextualElement`	`PlaceContextualElement([options])` Parameters: `options`: `PlaceContextualElementOptions optional`

Properties

contextToken

Type: string optional

The context token.

HTML attribute:

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

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

PlaceContextualElementOptions interface

google.maps.places.PlaceContextualElementOptions interface

Options for PlaceContextualElement.

Properties

contextToken optional

Type: string optional

The context token provided by the Grounding with Google Maps response.

PlaceContextualListConfigElement class

google.maps.places.PlaceContextualListConfigElement class

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

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

This class extends HTMLElement.

This class implements PlaceContextualListConfigElementOptions.

Access by calling const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

Constructor
`PlaceContextualListConfigElement`	`PlaceContextualListConfigElement([options])` Parameters: `options`: `PlaceContextualListConfigElementOptions optional`

Properties

layout

Type: PlaceContextualListLayout optional

The layout.

HTML attribute:

<gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
<gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>

mapHidden

Type: boolean optional

Whether the map is hidden.

HTML attribute:

<gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

type: string A case-sensitive string representing the event type to listen for.
listener: EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
options: boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value: void

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

PlaceContextualListConfigElementOptions interface

google.maps.places.PlaceContextualListConfigElementOptions interface

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 constants

google.maps.places.PlaceContextualListLayout constants

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

Access by calling const {PlaceContextualListLayout} = await google.maps.importLibrary("places").
See Libraries in the Maps JavaScript API.

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

Places Widgets

PlaceAutocompleteElement class

Constructor

Properties

Slots

Parts

CSS Properties

Methods

Events

PlaceAutocompleteElementOptions interface

Properties

BasicPlaceAutocompleteElement class

Constructor

Properties

Slots

Parts

CSS Properties

Methods

Events

PlaceDetailsElement class

Constructor

Properties

CSS Properties

Methods

Events

PlaceDetailsElementOptions interface

PlaceDetailsCompactElement class

Constructor

Properties

CSS Properties

Methods

Events

PlaceDetailsPlaceRequestElement class

Constructor

Properties

Methods

PlaceDetailsLocationRequestElement class

Constructor

Properties

Methods

PlaceSearchElement class

Constructor

Properties

CSS Properties

Methods

Events

PlaceSearchAttributionPosition constants

Constants

PlaceSearchOrientation constants

Constants

PlaceSelectEvent class

Properties

PlaceNearbySearchRequestElement class

Constructor

Properties

Methods

PlaceTextSearchRequestElement class

Constructor

Properties

Methods

Autocomplete class

Constructor

Methods

Events

AutocompleteOptions interface

Properties

SearchBox class

Constructor

Methods

Events

SearchBoxOptions interface

Properties

PlaceContextualElement class

Constructor

Properties

Methods

PlaceContextualElementOptions interface

Properties

PlaceContextualListConfigElement class

Constructor