Stay organized with collections Save and categorize content based on your preferences.
PlaceAutocompleteElement classgoogle.maps.places.PlaceAutocompleteElement
class
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 https://developers.google.com/maps/documentation/places/web-service/place-session-tokens for more details on how sessions work.
Custom element:<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>
This class extends HTMLElement
.
This class implements PlaceAutocompleteElementOptions
.
Access by calling const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
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.
<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#namefor 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/formfor 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>
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>
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.
MethodsaddEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
Eventsgmp-error
function(errorEvent)
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)
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 interfacegoogle.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.
PlacePredictionSelectEvent classgoogle.maps.places.PlacePredictionSelectEvent
class
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
.
This class extends Event
.
Access by calling const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
google.maps.places.PlaceAutocompleteRequestErrorEvent
class
Deprecated: The gmp-requesterror
event will continue to trigger in the beta channel, but will not trigger in alpha or at release. For migration purposes, continue to listen to the gmp-requesterror
event, but also add an event listener for the gmp-error
event, which returns an Event
object.
Notice: Available only in the v=beta channel.
This event is emitted by the PlaceAutocompleteElement when there is an issue with the network request.
This class extends Event
.
Access by calling const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
google.maps.places.PlaceContextualElement
class
Notice: Available only in the v=alpha channel.
A widget that uses the context token to display a contextual view of the Grounding with Google Maps response.
Custom element:<gmp-place-contextual context-token="string"></gmp-place-contextual>
This class extends HTMLElement
.
This class implements PlaceContextualElementOptions
.
Access by calling const {PlaceContextualElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
contextToken
Type: string optional
The context token.
HTML attribute:<gmp-place-contextual context-token="string"></gmp-place-contextual>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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 interfacegoogle.maps.places.PlaceContextualElementOptions
interface
Notice: Available only in the v=alpha channel.
Options for PlaceContextualElement
.
contextToken optional
Type: string optional
The context token provided by the Grounding with Google Maps response.
PlaceContextualListConfigElement classgoogle.maps.places.PlaceContextualListConfigElement
class
Notice: Available only in the v=alpha channel.
An HTML element that configures options for the Place Contextual Element's list view.
Custom element:<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>
This class extends HTMLElement
.
This class implements PlaceContextualListConfigElementOptions
.
Access by calling const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
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>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
PlaceContextualListLayout constantsgoogle.maps.places.PlaceContextualListLayout
constants
Notice: Available only in the v=alpha channel.
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.
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. PlaceDetailsElement class
google.maps.places.PlaceDetailsElement
class
Notice: Available only in the v=alpha channel.
An HTML element that displays details for a place. Use the configureFromPlace()
or configureFromLocation()
methods to specify the content to be rendered. To use the Place Details Element, enable the Places UI Kit API for your project in the Google Cloud console.
Custom element:<gmp-place-details size="small"></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.
place
Type: Place optional
Read only. Place
object containing the ID, location, and viewport of the currently rendered place.
size
Type: PlaceDetailsSize optional
The size variant of the PlaceDetailsElement. By default, the element will display PlaceDetailsSize.X_LARGE
.
<gmp-place-details size="small"></gmp-place-details>
<gmp-place-details size="medium"></gmp-place-details>
<gmp-place-details size="large"></gmp-place-details>
<gmp-place-details size="x-large"></gmp-place-details>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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.
configureFromLocation
configureFromLocation(location)
location
: LatLng|LatLngLiteral
The location to render place details for.Promise<void>
A promise that resolves once place data is loaded and rendered.
Configures the widget from a LatLng
using reverse geocoding.
configureFromPlace
configureFromPlace(place)
place
: Place|{id:string}
The place to render details for.Promise<void>
A promise that resolves once place data is loaded and rendered.
Configures the widget from a Place
object or Place ID.
removeEventListener
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
Eventsgmp-load
function(event)
event
: Event
This event is fired when the element loads and renders its content. This event does not bubble.
gmp-requesterror
function(event)
event
: Event
This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
PlaceDetailsSize constantsgoogle.maps.places.PlaceDetailsSize
constants
Notice: Available only in the v=alpha channel.
Size variants for PlaceDetailsElement
.
Access by calling const {PlaceDetailsSize} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
LARGE
Large variant including a large image, basic information, and contact information. MEDIUM
Medium variant including a large image and basic information. SMALL
Small variant including a small image and basic information. X_LARGE
Extra large variant including a photo collage, reviews, and comprehensive place information. PlaceDetailsCompactElement class
google.maps.places.PlaceDetailsCompactElement
class
Notice: Available only in the v=beta channel.
Displays details for a place in a compact layout. Append a PlaceDetailsPlaceRequestElement
to specify the place to be rendered. Append a PlaceContentConfigElement
, PlaceStandardContentElement
, or PlaceAllContentElement
to specify which content to render.
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.
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>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
Eventsgmp-error
function(event)
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)
event
: Event
This event is fired when the element loads and renders its content. This event does not bubble.
PlaceDetailsPlaceRequestElement classgoogle.maps.places.PlaceDetailsPlaceRequestElement
class
Notice: Available only in the v=beta channel.
Configures a Place Details Compact element to load data based on a place object, ID, or resource name. Append this element as a child of a PlaceDetailsCompactElement
to load data for the specified place.
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.
place
Type: Place optional
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>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
PlaceContentConfigElement classgoogle.maps.places.PlaceContentConfigElement
class
Notice: Available only in the v=beta channel.
Configures the content to be shown by a Place Details Compact element. Append this element as a child of a PlaceDetailsCompactElement
to use it. Append any of the following elements to the PlaceContentConfigElement
to show the corresponding content: PlaceMediaElement
, PlaceAddressElement
, PlaceRatingElement
, PlaceTypeElement
, PlacePriceElement
, PlaceAccessibleEntranceIconElement
, PlaceOpenNowStatusElement
, PlaceAttributionElement
The order of the children does not matter; the element renders content in a standard order which is not customizable.
Custom element:<gmp-place-content-config></gmp-place-content-config>
This class extends HTMLElement
.
This class implements PlaceContentConfigElementOptions
.
Access by calling const {PlaceContentConfigElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
google.maps.places.PlaceMediaElement
class
Notice: Available only in the v=beta channel.
Configures a Place Details Compact element to show a place's media, such as photos. Append this element as a child of a PlaceContentConfigElement
to use it.
Custom element:<gmp-place-media lightbox-preferred></gmp-place-media>
This class extends HTMLElement
.
This class implements PlaceMediaElementOptions
.
Access by calling const {PlaceMediaElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
lightboxPreferred
Type: boolean optional
Default: false
Whether to enable or disable the media lightbox, in cases where both options are supported.
HTML attribute:<gmp-place-media lightbox-preferred></gmp-place-media>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
google.maps.places.PlaceMediaElementOptions
interface
Notice: Available only in the v=beta channel.
Options for PlaceMediaElement
.
google.maps.places.PlaceAttributionElement
class
Notice: Available only in the v=beta channel.
Allows customization of the Google Maps attribution text in a Place Details Compact element. Append this element as a child of a PlaceContentConfigElement
to use it. If this element is omitted, attribution will still be shown with default colors.
Custom element:<gmp-place-attribution dark-scheme-color="white" light-scheme-color="white"></gmp-place-attribution>
This class extends HTMLElement
.
This class implements PlaceAttributionElementOptions
.
Access by calling const {PlaceAttributionElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
darkSchemeColor
Type: AttributionColor optional
Default: AttributionColor.WHITE
The color of the Google Maps attribution in dark mode.
HTML attribute:<gmp-place-attribution dark-scheme-color="white"></gmp-place-attribution>
<gmp-place-attribution dark-scheme-color="black"></gmp-place-attribution>
<gmp-place-attribution dark-scheme-color="gray"></gmp-place-attribution>
lightSchemeColor
Type: AttributionColor optional
Default: AttributionColor.GRAY
The color of the Google Maps attribution in light mode.
HTML attribute:<gmp-place-attribution light-scheme-color="white"></gmp-place-attribution>
<gmp-place-attribution light-scheme-color="black"></gmp-place-attribution>
<gmp-place-attribution light-scheme-color="gray"></gmp-place-attribution>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
AttributionColor constantsgoogle.maps.places.AttributionColor
constants
Notice: Available only in the v=beta channel.
Color options for Google Maps attribution text. Attribution may be customized to use any of these colors.
Access by calling const {AttributionColor} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
BLACK
Black attribution text. GRAY
Gray attribution text. WHITE
White attribution text. PlaceStandardContentElement class
google.maps.places.PlaceStandardContentElement
class
Notice: Available only in the v=beta channel.
Configures a Place Details Compact element to show a standard set of content (media, rating, type, price, accessible entrance icon, and open now status). Append this element as a child of a PlaceDetailsCompactElement
to use it.
Custom element:<gmp-place-standard-content></gmp-place-standard-content>
This class extends HTMLElement
.
This class implements PlaceStandardContentElementOptions
.
Access by calling const {PlaceStandardContentElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
PlaceListElement classgoogle.maps.places.PlaceListElement
class
Notice: Available only in the v=alpha channel.
An HTML element that displays the results of a place search in a list. Use the configureFromSearchByTextRequest()
or configureFromSearchNearbyRequest()
methods to specify the request to render results for. To use the Place List Element, enable the Places UI Kit API for your project in the Google Cloud console.
Custom element:<gmp-place-list selectable></gmp-place-list>
This class extends HTMLElement
.
This class implements PlaceListElementOptions
.
Access by calling const {PlaceListElement} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
places
Type: Array<Place>
Read only. Array of Place
objects containing the IDs, locations, and viewports of the currently rendered places.
selectable
Type: boolean
Whether or not the list items are selectable. If true, the list items will be buttons that dispatch the gmp-placeselect
event when clicked. Accessible keyboard navigation and selection is also supported.
<gmp-place-list selectable></gmp-place-list>
addEventListener
Notice: Available only in the v=beta channel.
addEventListener(type, listener[, options])
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 methodoptions
: 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.
configureFromSearchByTextRequest
configureFromSearchByTextRequest(request)
request
: SearchByTextRequest
The request to render results for. The fields
property of the SearchByTextRequest
is not required.Promise<void>
A promise that resolves once place data is loaded and rendered.
Configures the widget to render search results from a Places Text Search API request.
configureFromSearchNearbyRequest
configureFromSearchNearbyRequest(request)
request
: SearchNearbyRequest
The request to render results for. The fields
property of the SearchNearbyRequest
is not required.Promise<void>
A promise that resolves once place data is loaded and rendered.
Configures the widget to render search results from a Places Nearby Search API request.
removeEventListener
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
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.
Eventsgmp-load
function(event)
event
: Event
This event is fired when the element loads and renders its content. This event does not bubble.
gmp-placeselect
function(event)
event
: PlaceListPlaceSelectEvent
This event is fired when a user selects a place. Contains a Place
object and the index of the selected place in the list.
gmp-requesterror
function(event)
event
: Event
This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
PlaceListPlaceSelectEvent classgoogle.maps.places.PlaceListPlaceSelectEvent
class
Notice: Available only in the v=alpha channel.
This event is emitted by the PlaceListElement
when the user selects a place.
This class extends Event
.
Access by calling const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
.
See Libraries in the Maps JavaScript API.
index
Type: number
The list index of the selected place.
place
Type: Place
A Place
object containing the ID, location, and viewport of the selected place.
google.maps.places.Autocomplete
class
Deprecated: 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 https://developers.google.com/maps/legacy for additional details and https://developers.google.com/maps/documentation/javascript/places-migration-overview for the migration guide.
A widget that provides Place predictions based on a user's text input. It attaches to an input element of 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.
Autocomplete
Autocomplete(inputField[, opts])
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.
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)
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)
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)
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)
options
: AutocompleteOptions optional
Return Value: None
setTypes
setTypes(types)
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.
google.maps.places.AutocompleteOptions
interface
The options that can be set on an Autocomplete
object.
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']
.
placeIdOnlyoptional
Deprecated: placeIdOnly
is deprecated as of January 15, 2019, and will be turned off on January 15, 2020. Use AutocompleteOptions.fields
instead: fields: ['place_id', 'name', 'types']
.
Type: 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.
SearchBox classgoogle.maps.places.SearchBox
class
Deprecated: As of March 1st, 2025, google.maps.places.SearchBox is not available to new customers. At this time, google.maps.places.SearchBox is not scheduled to be discontinued and will continue to receive bug fixes for any major regressions. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/legacy for additional details.
A widget that provides query predictions based on a user's text input. It attaches to an input element of 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.
SearchBox
SearchBox(inputField[, opts])
inputField
: HTMLInputElement
opts
: SearchBoxOptions optional
Creates a new instance of SearchBox
that attaches to the specified input text field with the given options.
places_changed
function()
Arguments: None
This event is fired when the user selects a query, getPlaces
should be used to get new places.
google.maps.places.SearchBoxOptions
interface
The options that can be set on a SearchBox
object.
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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-08-14 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4