Get Started Contact sales

    Places Widgets

    PlaceAutocompleteElement class

    google.maps.places . PlaceAutocompleteElement class
    extends HTMLElement
    implements PlaceAutocompleteElementOptions

    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.

    <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=" value-name 
">
</gmp-place-autocomplete>
     
     const 
  
 { 
 PlaceAutocompleteElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceAutocompleteElement
    PlaceAutocompleteElement(options)
    Parameters:
    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: included-primary-types="type1 type2 type3..."
    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: included-region-codes="c1 c2 c3..."
    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: name="string"
    origin
    The origin from which to calculate distance. If not specified, distance is not calculated. The altitude, if given, is not used in the calculation.
    HTML attribute:
    • origin="lat,lng"
    • origin="lat,lng,altitude"
    placeholder
    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: requested-language="string"
    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: requested-region="string"
    unitSystem
    Type: UnitSystem optional
    The unit system used to display distances. If not specified, the unit system is determined by requestedRegion.
    HTML attribute: unit-system="value-name"
    value
    Type: string
    The value of the input element.
    prediction-item-icon
    This slot accepts exactly one <template> element to render as the icon shown next to the prediction item.
    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.
    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.
    Inherited: addEventListener , removeEventListener
    gmp-error
    function(errorEvent)
    Arguments:
    • errorEvent :  Event optional
    This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
    gmp-select
    function(placePredictionSelectEvent)
    Arguments:
    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.
    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
    requestedLanguage optional
    Type: string optional
    requestedRegion optional
    Type: string optional
    unitSystem optional
    Type: UnitSystem optional
    value optional
    Type: string optional
    The value of the input element.

    PlacePredictionSelectEvent class

    google.maps.places . PlacePredictionSelectEvent class
    extends Event

    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 .

     const 
  
 { 
 PlacePredictionSelectEvent 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    placePrediction
    Convert this to a Place by calling PlacePrediction.toPlace .

    BasicPlaceAutocompleteElement class

    google.maps.places . BasicPlaceAutocompleteElement class
    extends HTMLElement
    implements BasicPlaceAutocompleteElementOptions

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

    <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=" value-name 
">
</gmp-basic-place-autocomplete>
     
     const 
  
 { 
 BasicPlaceAutocompleteElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    BasicPlaceAutocompleteElement
    BasicPlaceAutocompleteElement(options)
    Parameters:
    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: included-primary-types="type1 type2 type3..."
    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: included-region-codes="c1 c2 c3..."
    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: name="string"
    origin
    The origin from which to calculate distance. If not specified, distance is not calculated. The altitude, if given, is not used in the calculation.
    HTML attribute:
    • origin="lat,lng"
    • origin="lat,lng,altitude"
    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: requested-language="string"
    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: requested-region="string"
    unitSystem
    Type: UnitSystem optional
    The unit system used to display distances. If not specified, the unit system is determined by requestedRegion.
    HTML attribute: unit-system="value-name"
    prediction-item-icon
    This slot accepts exactly one <template> element to render as the icon shown next to the prediction item.
    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.
    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.
    Inherited: addEventListener , removeEventListener
    gmp-error
    function(errorEvent)
    Arguments:
    • errorEvent :  Event optional
    This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
    gmp-select
    function(placeSelectEvent)
    Arguments:
    This event is fired when a user selects a place prediction. Contains a Place object.

    BasicPlaceAutocompleteElementOptions interface

    google.maps.places . BasicPlaceAutocompleteElementOptions interface

    Options for constructing a BasicPlaceAutocompleteElement.
    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
    requestedLanguage optional
    Type: string optional
    requestedRegion optional
    Type: string optional
    unitSystem optional
    Type: UnitSystem optional

    PlaceDetailsElement class

    google.maps.places . PlaceDetailsElement class
    extends HTMLElement
    implements PlaceDetailsElementOptions

    Displays details for a place in a full layout. Append either a PlaceDetailsPlaceRequestElement or PlaceDetailsLocationRequestElement to specify the place to be rendered. Append a PlaceContentConfigElement , PlaceStandardContentElement , or PlaceAllContentElement to specify which content to render.

    Example:

     <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. 
    <gmp-place-details></gmp-place-details>
     
     const 
  
 { 
 PlaceDetailsElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceDetailsElement
    PlaceDetailsElement([options])
    Parameters:
    place
    Type: Place optional
    Read only. Place object containing the ID, location, and viewport of the currently rendered place.
    --gmp-button-border-color
    Border color of the "Open in Maps" button.
    --gmp-button-border-radius
    Border radius of the "Open in Maps" button.
    --gmp-button-border-width
    Border width of the "Open in Maps" button.
    --gmp-collage-border-radius-outer
    Border radius of the outer corners of the media collage.
    --gmp-dialog-border-radius
    Border radius of the Google Maps disclosure dialog.
    --gmp-mat-color-disabled-surface
    Surface color intended to convey disabled states or non-presence. Used for empty review stars.
    --gmp-mat-color-info
    Color of UI elements with informational sentiment. Used for the wheelchair icon.
    --gmp-mat-color-negative
    Color of UI elements with negative sentiment. Used for "Closed" text in open now status.
    --gmp-mat-color-neutral-container
    Container color for neutral filled UI elements. Used for image placeholders and review published date badge.
    --gmp-mat-color-on-neutral-container
    Color of text and icons against the neutral container color. Used for the review published date badge and EV charger availability badge when unavailable.
    --gmp-mat-color-on-positive-container
    Color of texts and icons against the positive container color. Used for the EV charger availability badge when available.
    --gmp-mat-color-on-secondary-container
    Color of text and icons against the secondary container color. Used for text and icons on the "Open in Maps" button.
    --gmp-mat-color-on-surface
    Color for text and icons against any surface color. Used for regular text.
    --gmp-mat-color-on-surface-variant
    Lower-emphasis color for text and icons against any surface color. Used for less emphasized text.
    --gmp-mat-color-outline-decorative
    Outline color of non-interactive elements. Used for the element's border.
    --gmp-mat-color-positive
    Color of UI elements with positive sentiment. Used for "Open" text in open now status.
    --gmp-mat-color-positive-container
    Container color for UI elements that convey positive sentiment. Used for the EV charger availability badge when available.
    --gmp-mat-color-primary
    Color of interactive text and icons against the surface color. Used for review count, links in the Google Maps disclosures dialog, website link, icons in the overview tab, and (hover / focus / text color) on tab bar titles.
    --gmp-mat-color-secondary-container
    Less prominent fill color against surface, for recessive components like tonal buttons. Used for the background of the "Open in Maps" button.
    --gmp-mat-color-surface
    Color for backgrounds. Used for the backgrounds of the element and the Google Maps disclosures dialog.
    --gmp-mat-font-body-medium
    Used for the place address, rating, type, price, open now status, opening hours, review, phone number, website, plus code, top features, and body text in the Google Maps disclosures dialog.
    --gmp-mat-font-body-small
    Used for body text in the features list in the 'About' tab.
    --gmp-mat-font-display-small
    Used for the place name and the text for each feature heading in the 'About' tab.
    --gmp-mat-font-family
    Base font family used for all text.
    --gmp-mat-font-headline-medium
    Used for heading text in the Google Maps disclosures dialog.
    --gmp-mat-font-label-large
    Used for the tab titles, the "Open in Maps" button, reviewer attribution text in the photo gallery, reviewer attribution text in the reviews section, and links in the Google Maps disclosures dialog.
    --gmp-mat-font-label-medium
    Used for the photos count badge and the review published date badge.
    --gmp-mat-font-title-small
    Used for the title of each section in the 'About' tab.
    --gmp-mat-spacing-extra-large
    Used for spacing within the element, such as the margin and padding around text.
    --gmp-mat-spacing-extra-small
    Used for spacing within the element, such as the margin and padding around text.
    --gmp-mat-spacing-large
    Used for spacing within the element, such as the margin and padding around text.
    --gmp-mat-spacing-medium
    Used for spacing within the element, such as the margin and padding around text.
    --gmp-mat-spacing-small
    Used for spacing within the element, such as the margin and padding around text.
    --gmp-mat-spacing-two-extra-large
    Used for spacing within the element, such as the margin and padding around text.
    --gmp-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 .
    Inherited: addEventListener , removeEventListener
    gmp-error
    function(event)
    Arguments:
    • event :  Event optional
    This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
    gmp-load
    function(event)
    Arguments:
    • event :  Event optional
    This event is fired when the element loads and renders its content. This event does not bubble.

    PlaceDetailsElementOptions interface

    google.maps.places . PlaceDetailsElementOptions interface

    Options for PlaceDetailsElement .

    PlaceDetailsCompactElement class

    google.maps.places . PlaceDetailsCompactElement class
    extends HTMLElement
    implements PlaceDetailsCompactElementOptions

    Displays details for a place in a compact layout. Append a PlaceDetailsPlaceRequestElement or PlaceDetailsLocationRequestElement to specify the place to be rendered. Append a PlaceContentConfigElement , PlaceStandardContentElement , or PlaceAllContentElement to specify which content to render.

    Example:

     <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. 
    <gmp-place-details-compact
  orientation=" value-name 
"
  truncation-preferred>
</gmp-place-details-compact>
     
     const 
  
 { 
 PlaceDetailsCompactElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceDetailsCompactElement
    PlaceDetailsCompactElement([options])
    Parameters:
    orientation
    Type: PlaceDetailsOrientation optional
    Default: PlaceDetailsOrientation.VERTICAL
    The orientation variant (vertical or horizontal) of the element.
    HTML attribute: orientation="value-name"
    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: truncation-preferred
    --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 .
    Inherited: addEventListener , removeEventListener
    gmp-error
    function(event)
    Arguments:
    • event :  Event optional
    This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
    gmp-load
    function(event)
    Arguments:
    • event :  Event optional
    This event is fired when the element loads and renders its content. This event does not bubble.

    PlaceDetailsCompactElementOptions interface

    google.maps.places . PlaceDetailsCompactElementOptions interface

    Options for PlaceDetailsCompactElement .
    orientation optional
    Type: PlaceDetailsOrientation optional
    See PlaceDetailsCompactElement.orientation .
    truncationPreferred optional
    Type: boolean optional
    See PlaceDetailsCompactElement.truncationPreferred .

    PlaceDetailsOrientation constants

    google.maps.places . PlaceDetailsOrientation constants

    Orientation variants for PlaceDetailsCompactElement .

     const 
  
 { 
 PlaceDetailsOrientation 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    HORIZONTAL Horizontal orientation.
    VERTICAL Vertical orientation.

    PlaceDetailsPlaceRequestElement class

    google.maps.places . PlaceDetailsPlaceRequestElement class
    extends HTMLElement
    implements PlaceDetailsPlaceRequestElementOptions

    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>     

    <gmp-place-details-place-request
  place=" places/### 
">
</gmp-place-details-place-request>
     
     const 
  
 { 
 PlaceDetailsPlaceRequestElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceDetailsPlaceRequestElement
    PlaceDetailsPlaceRequestElement([options])
    Parameters:
    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: place="places/###"
    Inherited: addEventListener , removeEventListener

    PlaceDetailsPlaceRequestElementOptions interface

    google.maps.places . PlaceDetailsPlaceRequestElementOptions interface

    Options for PlaceDetailsPlaceRequestElement .
    place optional
    Type: Place |string optional
    See PlaceDetailsPlaceRequestElement.place

    PlaceDetailsLocationRequestElement class

    google.maps.places . PlaceDetailsLocationRequestElement class
    extends HTMLElement
    implements PlaceDetailsLocationRequestElementOptions

    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>     

    <gmp-place-details-location-request
  location=" lat,lng 
">
</gmp-place-details-location-request>
     
     const 
  
 { 
 PlaceDetailsLocationRequestElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceDetailsLocationRequestElement
    PlaceDetailsLocationRequestElement([options])
    Parameters:
    location
    Default: null
    The location to render details for in the Place Details element. Normalizes to a LatLngAltitude .
    HTML attribute: location="lat,lng"
    Inherited: addEventListener , removeEventListener

    PlaceDetailsLocationRequestElementOptions interface

    google.maps.places . PlaceDetailsLocationRequestElementOptions interface

    Options for PlaceDetailsLocationRequestElement .
    location optional
    The location to render the place for.

    PlaceSearchElement class

    google.maps.places . PlaceSearchElement class
    extends HTMLElement
    implements PlaceSearchElementOptions

    Displays the results of a place search in a list. Append a PlaceTextSearchRequestElement or PlaceNearbySearchRequestElement to specify the request to render results for. Append a PlaceContentConfigElement , PlaceStandardContentElement , or PlaceAllContentElement to specify which content to render.

    Example:

     <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. 
    <gmp-place-search
  attribution-position=" value-name 
"
  orientation=" value-name 
"
  selectable
  truncation-preferred>
</gmp-place-search>
     
     const 
  
 { 
 PlaceSearchElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceSearchElement
    PlaceSearchElement([options])
    Parameters:
    attributionPosition
    Default: PlaceSearchAttributionPosition.TOP
    The position of the attribution logo and legal disclosure button.
    HTML attribute: attribution-position="value-name"
    orientation
    Type: PlaceSearchOrientation optional
    Default: PlaceSearchOrientation.VERTICAL
    The orientation variant (vertical or horizontal) of the element.
    HTML attribute: orientation="value-name"
    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: selectable
    truncationPreferred
    Type: boolean optional
    Default: false
    If true, truncates certain lines of content to fit on one line instead of wrapping.
    HTML attribute: truncation-preferred
    --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 .
    Inherited: addEventListener , removeEventListener
    gmp-error
    function(event)
    Arguments:
    • event :  Event optional
    This event is fired when a request to the backend was denied (e.g. incorrect API key). This event does not bubble.
    gmp-load
    function(event)
    Arguments:
    • event :  Event optional
    This event is fired when the element loads and renders its content. This event does not bubble.
    gmp-select
    function(event)
    Arguments:
    This event is fired when a place is selected from the list. Contains a Place object containing the ID, location, and viewport of the selected place.

    PlaceSearchElementOptions interface

    google.maps.places . PlaceSearchElementOptions interface

    Options for PlaceSearchElement .
    attributionPosition optional
    See PlaceSearchElement.attributionPosition .
    orientation optional
    Type: PlaceSearchOrientation optional
    See PlaceSearchElement.orientation .
    selectable optional
    Type: boolean optional
    See PlaceSearchElement.selectable
    truncationPreferred optional
    Type: boolean optional
    See PlaceSearchElement.truncationPreferred .

    PlaceSearchAttributionPosition constants

    google.maps.places . PlaceSearchAttributionPosition constants

    Attribution positions for PlaceSearchElement .

     const 
  
 { 
 PlaceSearchAttributionPosition 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    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 .

     const 
  
 { 
 PlaceSearchOrientation 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    HORIZONTAL Horizontal orientation.
    VERTICAL Vertical orientation.

    PlaceSelectEvent class

    google.maps.places . PlaceSelectEvent class
    extends Event

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

     const 
  
 { 
 PlaceSelectEvent 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    place
    Type: Place
    The selected place.

    PlaceNearbySearchRequestElement class

    google.maps.places . PlaceNearbySearchRequestElement class
    extends HTMLElement
    implements PlaceNearbySearchRequestElementOptions

    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>     

    <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=" value-name 
">
</gmp-place-nearby-search-request>
     
     const 
  
 { 
 PlaceNearbySearchRequestElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceNearbySearchRequestElement
    PlaceNearbySearchRequestElement([options])
    Parameters:
    excludedPrimaryTypes
    Type: Array <string> optional
    Default: null
    Excluded primary place types.
    HTML attribute: excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."
    excludedTypes
    Type: Array <string> optional
    Default: null
    Excluded place types.
    HTML attribute: excluded-types="excluded-type1 excluded-type2..."
    includedPrimaryTypes
    Type: Array <string> optional
    Default: null
    Included primary place type.
    HTML attribute: included-primary-types="included-primary-type1 included-primary-type2..."
    includedTypes
    Type: Array <string> optional
    Default: null
    Included place type.
    HTML attribute: included-types="included-type1 included-type2..."
    locationRestriction
    Type: Circle | CircleLiteral optional
    Default: null
    The region to search. Normalizes to a Circle .
    HTML attribute: location-restriction="radius@lat,lng"
    maxResultCount
    Type: number optional
    Default: null
    Maximum number of results to return.
    HTML attribute: max-result-count="number"
    rankPreference
    Default: null
    How results will be ranked in the response.
    HTML attribute: rank-preference="value-name"
    Inherited: addEventListener , removeEventListener

    PlaceNearbySearchRequestElementOptions interface

    google.maps.places . PlaceNearbySearchRequestElementOptions interface

    Options for PlaceNearbySearchRequestElement .
    excludedPrimaryTypes optional
    Type: Array <string> optional
    Excluded primary place types. See PlaceNearbySearchRequestElement.excludedPrimaryTypes and SearchNearbyRequest.excludedPrimaryTypes for more details.
    excludedTypes optional
    Type: Array <string> optional
    Excluded place types. See PlaceNearbySearchRequestElement.excludedTypes and SearchNearbyRequest.excludedTypes for more details.
    includedPrimaryTypes optional
    Type: Array <string> optional
    Included primary place types. See PlaceNearbySearchRequestElement.includedPrimaryTypes and SearchNearbyRequest.includedPrimaryTypes for more details.
    includedTypes optional
    Type: Array <string> optional
    Included place types. See PlaceNearbySearchRequestElement.includedTypes and SearchNearbyRequest.includedTypes for more details.
    locationRestriction optional
    Type: Circle | CircleLiteral optional
    The region to search. See PlaceNearbySearchRequestElement.locationRestriction and SearchNearbyRequest.locationRestriction for more details.
    maxResultCount optional
    Type: number optional
    Maximum number of results to return. See PlaceNearbySearchRequestElement.maxResultCount and SearchNearbyRequest.maxResultCount for more details.
    rankPreference optional
    How results will be ranked in the response. See PlaceNearbySearchRequestElement.rankPreference and SearchNearbyRankPreference for more details.

    PlaceTextSearchRequestElement class

    google.maps.places . PlaceTextSearchRequestElement class
    extends HTMLElement
    implements PlaceTextSearchRequestElementOptions

    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>     

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

    PlaceTextSearchRequestElementOptions interface

    google.maps.places . PlaceTextSearchRequestElementOptions interface

    Options for PlaceTextSearchRequestElement .
    evConnectorTypes optional
    Type: Array < EVConnectorType > optional
    The list of preferred EV connector types. See SearchByTextRequest.evSearchOptions and PlaceTextSearchRequestElement.evConnectorTypes for more details.
    evMinimumChargingRateKw optional
    Type: number optional
    Minimum required charging rate in kilowatts. See SearchByTextRequest.evSearchOptions and PlaceTextSearchRequestElement.evMinimumChargingRateKw for more details.
    includedType optional
    Type: string optional
    The requested place type. See SearchByTextRequest.includedType and PlaceTextSearchRequestElement.includedType for more details.
    isOpenNow optional
    Type: boolean optional
    Used to restrict the search to places that are currently open. See SearchByTextRequest.isOpenNow and PlaceTextSearchRequestElement.isOpenNow for more details.
    locationBias optional
    Type: LocationBias optional
    Location bias for the search. See SearchByTextRequest.locationBias and PlaceTextSearchRequestElement.locationBias for more details.
    locationRestriction optional
    Location restriction for the search. See SearchByTextRequest.locationRestriction and PlaceTextSearchRequestElement.locationRestriction for more details.
    maxResultCount optional
    Type: number optional
    Maximum number of results to return. See SearchByTextRequest.maxResultCount and PlaceTextSearchRequestElement.maxResultCount for more details.
    minRating optional
    Type: number optional
    Filter out results whose average user rating is strictly less than this limit. See SearchByTextRequest.minRating and PlaceTextSearchRequestElement.minRating for more details.
    priceLevels optional
    Type: Array < PriceLevel > optional
    Used to restrict the search to places that are marked as certain price levels. See SearchByTextRequest.priceLevels and PlaceTextSearchRequestElement.priceLevels for more details.
    rankPreference optional
    How results will be ranked in the response. See SearchByTextRequest.rankPreference and PlaceTextSearchRequestElement.rankPreference for more details.
    textQuery optional
    Type: string optional
    The text query for textual search. See SearchByTextRequest.textQuery and PlaceTextSearchRequestElement.textQuery for more details.
    useStrictTypeFiltering optional
    Type: boolean optional
    Used to set strict type filtering for SearchByTextRequest.includedType . See SearchByTextRequest.useStrictTypeFiltering and PlaceTextSearchRequestElement.useStrictTypeFiltering for more details.

    Autocomplete class

    google.maps.places . Autocomplete class
    extends MVCObject

    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.

     const 
  
 { 
 Autocomplete 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    Autocomplete
    Autocomplete(inputField[, opts])
    Parameters:
    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)
    Parameters:
    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:
    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:
    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
    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.
    bounds 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
    extends MVCObject

    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.

     const 
  
 { 
 SearchBox 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    SearchBox
    SearchBox(inputField[, opts])
    Parameters:
    Creates a new instance of SearchBox that attaches to the specified input text field with the given options.
    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:
    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.
    bounds 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
    extends HTMLElement
    implements PlaceContextualElementOptions

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

    <gmp-place-contextual
  context-token=" string 
">
</gmp-place-contextual>
     
     const 
  
 { 
 PlaceContextualElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceContextualElement
    PlaceContextualElement([options])
    Parameters:
    contextToken
    Type: string optional
    The context token.
    HTML attribute: context-token="string"
    Inherited: addEventListener , removeEventListener

    PlaceContextualElementOptions interface

    google.maps.places . PlaceContextualElementOptions interface

    Options for PlaceContextualElement .
    contextToken optional
    Type: string optional
    The context token provided by the Grounding with Google Maps response.

    PlaceContextualListConfigElement class

    google.maps.places . PlaceContextualListConfigElement class
    extends HTMLElement
    implements PlaceContextualListConfigElementOptions

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

    <gmp-place-contextual-list-config
  layout=" value-name 
"
  map-hidden>
</gmp-place-contextual-list-config>
     
     const 
  
 { 
 PlaceContextualListConfigElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    PlaceContextualListConfigElement
    PlaceContextualListConfigElement([options])
    Parameters:
    layout
    Type: PlaceContextualListLayout optional
    The layout.
    HTML attribute: layout="value-name"
    mapHidden
    Type: boolean optional
    Whether the map is hidden.
    HTML attribute: map-hidden
    Inherited: addEventListener , removeEventListener

    PlaceContextualListConfigElementOptions interface

    google.maps.places . PlaceContextualListConfigElementOptions interface

    Options for PlaceContextualListConfigElement.
    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.

     const 
  
 { 
 PlaceContextualListLayout 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    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.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: