Skip to content

Latest commit

 

History

History
49 lines (30 loc) · 7.02 KB

README.md

File metadata and controls

49 lines (30 loc) · 7.02 KB

Extended Component Library » Place Building Blocks

Textual Place Field: <gmpx-place-field-text> (as class PlaceFieldText)

Component that renders a string or numeric field of a Place or PlaceResult as text. It can also render the field "types", in which case it will show only the most applicable place type, if available.

This component is designed to work with a Place Data Provider; please see Place Building Blocks for more information.

Importing

When loading the library with a <script> tag (referencing the CDN bundle), please refer to the instructions in the root-level Readme. You do not need to take additional steps to use this component.

When bundling your dependencies and you want to include <gmpx-place-field-text> on a page:

import '@googlemaps/extended-component-library/place_building_blocks/place_field_text.js';

When bundling your dependencies and you need to access the class PlaceFieldText directly (less common):

import { PlaceFieldText } from '@googlemaps/extended-component-library/place_building_blocks/place_field_text.js';

Attributes and properties

Attribute Property Property type Description Default Reflects?
field field TextField | undefined The field to display, formatted as it is on either a Place or PlaceResult.

Allowed Place fields are: businessStatus, displayName, formattedAddress, id, internationalPhoneNumber, location, location.lat, location.lng, nationalPhoneNumber, plusCode.compoundCode, plusCode.globalCode, rating, types, and userRatingCount.

You may also specify one of the equivalent PlaceResult field names: business_status, name, formatted_address, place_id, international_phone_number, geometry.location, geometry.location.lat, geometry.location.lng, formatted_phone_number, plus_code.compound_code, plus_code.global_code, rating, types, and user_ratings_total.		 ✅
place Place|PlaceResult|null|undefined Place data to render, overriding anything provided by context. ❌
no-data noData boolean This read-only property and attribute indicate whether the component has the required Place data to display itself.

Use the attribute to target CSS rules if you wish to hide this component, or display alternate content, when there's no valid data.		 true ✅

Styling

This is a low-level component designed to be styled with built-in CSS properties. For most styling purposes, it is equivalent to a <span> element.

For example, by default this component will inherit the color of its parent element. However, you can change the color by writing the following CSS:

gmpx-place-field-text {
  color: blue;
}