Formatted Address

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.

1<template>
2    <lightning-formatted-address
3        street="1 Market St."
4        city="San Francisco"
5        country="US"
6        province="CA"
7        postal-code="94105"
8    >
9    </lightning-formatted-address>
10</template>

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.

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.

1<template>
2    <lightning-formatted-address
3        street="1 Market St."
4        city="San Francisco"
5        country="US"
6        province="CA"
7        postal-code="94105"
8        latitude="37.792179"
9        longitude="-122.392735"
10    >
11    </lightning-formatted-address>
12</template>

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

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.

1<template>
2    <lightning-formatted-address
3        street="1 Market St."
4        city="San Francisco"
5        country="US"
6        province="CA"
7        postal-code="94105"
8        show-static-map
9    >
10    </lightning-formatted-address>
11</template>

By default, each line of address uses the slds-truncate class. To remove address line truncation, set variant="plain". This configuration renders each address line without truncating it.

1<template>
2    <lightning-formatted-address
3        street="45 Ffordd Penmynydd"
4        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"
5        country="United Kingdom"
6        province="Wales"
7        postal-code="LL61 5UJ"
8        variant="plain"
9        disabled
10    ></lightning-formatted-address>
11</template>

Object Reference for the Salesforce Platform: Field Types