Multi address

List contact details and display a map for each office or store across multiple locations.

Use case	Show addresses and maps for company offices or stores.
Page speed impact	The component itself has Low impact, but Google and other embeddable maps may load external files (usually JavaScript), which can result in Medium or even High impact. Consider alternative approaches, such as static map images, for better performance.
Available in pages	Yes
Reserved block class	`multi-address`
Relevant files	`css/components/multi-address.css` `js/components/multi-address.js`

Quick demo

Good to know

Instead of an embeddable map, you can use a plain image, which loads much faster if the file is well optimized with TinyPNG.com.

<div>
  <img 
    src="path/to/your/image.png" 
    alt="Map and Directions for our office in New York" 
    width="1000" 
    height="1000" 
    style="width: 100%; height: 100%; max-width: none; object-fit: cover;" 
    loading="lazy"
  >
</div>

<div>
  <img 
    src="path/to/your/image.png" 
    alt="Map and Directions for our office in New York" 
    width="1000" 
    height="1000" 
    style="width: 100%; height: 100%; max-width: none; object-fit: cover;" 
    loading="lazy"
  >
</div>

The code above stretches and crops the image to fill the column. To avoid cropping, use this code instead, though the image may not fill the entire column if it is smaller:

<div>
  <img 
    src="path/to/your/image.png" 
    alt="Map and Directions for our office in New York" 
    width="1000" 
    height="1000" 
    style="width: 100%; height: auto;" 
    loading="lazy"
  >
</div>

<div>
  <img 
    src="path/to/your/image.png" 
    alt="Map and Directions for our office in New York" 
    width="1000" 
    height="1000" 
    style="width: 100%; height: auto;" 
    loading="lazy"
  >
</div>

To link the image to an external map, replace the opening and closing <div> with an <a> tag:

<a 
  href="https://goo.gl/maps/8SdALFW1U2VCYEYu5" 
  target="_blank"
>
  <img 
    src="path/to/your/image.png" 
    alt="Map and Directions for our office in New York" 
    width="1000" 
    height="1000" 
    style="width: 100%; height: 100%; max-width: none; object-fit: cover;" 
    loading="lazy"
  >
</a>

<a 
  href="https://goo.gl/maps/8SdALFW1U2VCYEYu5" 
  target="_blank"
>
  <img 
    src="path/to/your/image.png" 
    alt="Map and Directions for our office in New York" 
    width="1000" 
    height="1000" 
    style="width: 100%; height: 100%; max-width: none; object-fit: cover;" 
    loading="lazy"
  >
</a>