README.md

Extended Component Library » Place Building Blocks

Place Link: <gmpx-place-field-link> (as class PlaceFieldLink)

Component that renders an anchor tag to one of this place's URLs: websiteURI or googleMapsURI. By default, renders a link to websiteURI with the URL's domain as the text.

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-link> on a page:

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

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

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

Attributes and properties

Attribute	Property	Property type	Description	Default	Reflects?
href-field	hrefField	LinkField	The field to link to, formatted as it is on either a Place or PlaceResult. Allowed fields are: googleMapsURI or url for a link to this place on Google Maps; websiteURI or website for a link to this place's website.	'websiteURI'	✅
aria-label	ariaLabel	string|null	The link description that gets read by assistive technology. Set this to something more descriptive if the link's purpose isn't clear from its text content alone. For example, if the link text is just "Website", then the aria-label could be "Website for (business name)".	null	✅
	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-link {
  color: blue;
}