LocationDisplay

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.

For more information on how to use the features and props for this component, check out the developer documentation.

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.

NameTypeDefaultDescription
classNamestringAdditional CSS classes.
displayTextstringThe text to be displayed.
heightstring'25rem' Height of the map container.
ref
Ref<HTMLAnchorElement |HTMLSpanElement> 
Ref for the wrapping element.
value
string |LatLng 
Location address or coordinates
variant
'text-map' |'text' |'map' 
"text-map" Controls styling of the field.
zoomLevelnumber13 How much the map should zoom.