---
schema_version: "1"
id: 2ceffd8bcd8464717f32cc28b65c492c7400b3223899f25d30b1a8b292df8341
title: Formatted Address
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/formattedAddress/lightning-formatted-address.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-formatted-address.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3e4237db034fb898d364ed9eafa73fae65e6ef076471c5abcae9a2517f136ce3
products:
  - Lightning Component Reference
---

# Formatted Address

**`lightning-formatted-address`**

Displays a formatted address with a link to the given location on Google Maps. The link is opened in a new tab. A static map can be displayed with the address for better context.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="formattedAddress" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-formatted-address` component shows addresses in a format and field order
that's determined by the user's Salesforce locale.

Specify a valid address using attributes for `street`, `city`, `country`, `province`, and
`postal-code`.

This example specifies an address.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-address
        street="1 Market St."
        city="San Francisco"
        country="US"
        province="CA"
        postal-code="94105"
    >
    </lightning-formatted-address>
</template>
```
<!-- prettier-ignore-end -->

The output looks like this in the en-US locale.

1 Market St.\
San Francisco, CA 94105\
US

By default, the address renders as a link that
opens the given location in Google Maps in a new tab. The link
follows the format `https://www.google.com/maps/?q=your+address`.
In the example, the link corresponds to
`https://www.google.com/maps/?q=121%20Spear%20St.%0ASan%20Francisco,%20CA%2094105%0AUS`.

Specify the `disabled` attribute to show the address in plain text
without a link.

## Specify Coordinates for Mapping

You can provide the `latitude` and `longitude` attributes in addition to
the address fields. This configuration enables faster map rendering by avoiding the
geocode processing that's required for street addresses on Google Maps.
The formatted address shows the street address fields,
but the link URL uses the latitude and longitude for Google Maps.

This example specifies an address and uses latitude and longitude for mapping.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-address
        street="1 Market St."
        city="San Francisco"
        country="US"
        province="CA"
        postal-code="94105"
        latitude="37.792179"
        longitude="-122.392735"
    >
    </lightning-formatted-address>
</template>
```
<!-- prettier-ignore-end -->

The link URL with latitude and longitude follows the format
`https://www.google.com/maps/?q=37.792179,-122.392735`.

## Show a Static Map

Use the `show-static-map` attribute to show a map with your address.
The address and the static map are both linked to Google Maps.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-address
        street="1 Market St."
        city="San Francisco"
        country="US"
        province="CA"
        postal-code="94105"
        show-static-map
    >
    </lightning-formatted-address>
</template>
```
<!-- prettier-ignore-end -->

## Address Line Truncation

By default, each line of address uses the [slds-truncate](https://v1.lightningdesignsystem.com/utilities/truncation/) class.
To remove address line truncation, set `variant="plain"`. This configuration renders each address line without truncating it.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-formatted-address
        street="45 Ffordd Penmynydd"
        city="St Mary's Church in the Hollow of the White Hazel near a Rapid Whirlpool and the Church of St. Tysilio near the Red Cave"
        country="United Kingdom"
        province="Wales"
        postal-code="LL61 5UJ"
        variant="plain"
        disabled
    ></lightning-formatted-address>
</template>
```
<!-- prettier-ignore-end -->

## Accessibility

`lightning-formatted-address` specifies the `aria-label` description on the link so screen readers can announce the destination address. The `aria-label` description dynamically combines the action and the address using the format:

```
Show in Google Maps, {your_formatted_address}
```

The description provides clear intent to assistive technologies, making it obvious that interacting with the link opens the location externally.

If you specify the `disabled` attribute on the component, the address is shown in plain text instead of a link.

## See Also

[_Object Reference for the Salesforce Platform_: Field Types](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/field_types.htm)


:::::

:::::tab
::component-specification{component="formattedAddress" model="lwc" namespace="lightning"}

:::::

::::::