Map

Purpose

The Map component embeds a map from an external provider (for example Google Maps or OpenStreetMap) in an <iframe>.

The merchant pastes the provider's embed code in the admin. The storefront keeps only the src of the first <iframe> in that code, so any other markup or script is ignored.

Configuring it in the admin

Setting	Purpose
View	The component view, `Default`.
Component name	The name shown in the page builder.
Custom CSS class	Added to the component wrapper.
Header	Optional title above the map. Also used as the iframe `title`.
Alignment	Alignment of the header: `Left`, `Center` or `Right`.
Embed code	The map's embed HTML, pasted as-is.

To get the embed code from Google Maps: search for the place, choose Share > Embed a map, and copy the HTML.

The embed code is accepted when it contains an <iframe> whose src is an absolute https URL, or when it is just such a URL. Anything else renders no map, and the component outputs nothing.

Inputs (model contract)

Model shape (storefront example)

{
  "name": "Map",
  "view": "Default",
  "section": "SectionA",
  "embedUrl": "https://www.google.com/maps/embed?pb=...",
  "settings": {
    "embedCode": "<iframe src=\"https://www.google.com/maps/embed?pb=...\" width=\"600\" height=\"450\"></iframe>",
    "id": "Component Id",
    "type": "NoirMap",
    "view": "Default",
    "displayName": "",
    "cssClass": "",
    "header": "",
    "alignment": "Left"
  },
  "translations": {
    "map": "Sample text",
    "...": "..."
  }
}

Fields

model.EmbedUrl
The validated https iframe source extracted from settings.embedCode. Empty when the embed code holds no usable URL; the component then renders nothing. Use this field rather than settings.embedCode, which is the raw, unvalidated text.

settings.id
Used for the wrapper id: comp-{{ id }}.

settings.cssClass
Applied only when non-empty and not (UNDEFINED).

settings.header
Rendered as a title above the map when provided.

settings.alignment
Sets the header alignment classes.

translations.map
Used as the iframe title when there is no header.

Template behavior (Liquid)

Renders nothing when model.EmbedUrl is blank.

Otherwise renders the header (if any) and an <iframe> with the URL, filling a container 265px high on mobile and 440px from the lg breakpoint.

The iframe is lazy-loaded (loading="lazy") and allows full screen.

The section renders with a map--loading class, which covers the map area with a skeleton. The iframe's onload handler removes the class once the embedded map has loaded.

The component has no JavaScript.

Map

Purpose#

Configuring it in the admin#

Inputs (model contract)#

Model shape (storefront example)#