| Name | Description | Default | Type |
|---|---|---|---|
className | Additional CSS classes. | | string |
displayText | The text to be displayed. | | string |
height | Height of the map container. | '25rem' | string |
ref | Ref for the wrapping element. | | Ref<HTMLAnchorElement |HTMLSpanElement> |
value | Location address or coordinates | | string |LatLng |
variant | Controls styling of the field. | "text-map" | 'map' |'text' |'text-map' |
zoomLevel | How much the map should zoom. | 13 | number |
LocationDisplay
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The LocationDisplay component adds the Google Maps utility into any client-side application. The location provided to the component can be displayed as one of three variants: text, map, or text-map. The text variant will render a Link that opens the supplied location within a new Google Maps tab. The map variant will render just a map centered on the location. The default variant is text-map, which is a combination of the other two.
Note: For security reasons, the following demo features a development version of the Google Maps API that does not require an API key. Add protection to your API key by following the Google API key restriction guidelines. You can insert your own API key into the demo to see the full capabilities of this component.
Usage
You will need a Google API Key to work with the LocationDisplay component. Any LocationDisplay component or LocationInput component must be wrapped with a <MapsContext.Provider> component that take a configuration object that includes the name of the map provider and the necessary API key.
<MapsContext.Provider value={{ name: 'google', apiKey: 'your_unique_api_key' }}>
The location passed to the LocationDisplay component should be a formatted address or coordinate in order to guarantee flawless intergration if a user were to click on the LocationDisplay Link when it's set as a text or text-map variant.
If no displayText is provided, the display will default to the location given. The component displays "--" in the case of an undefined value. The height and zoomLevel of the map may also be adjusted, similar to the LocationInput component.