Docs Block Reference Map

Map

An embedded map of a single address. Choose between rectangle or circular shape, full-colour or greyscale style, and zoom from street-level (20) to whole-world (1).

When to use it

  • Contact-page location map
  • "Find us" section on a venue / restaurant / retail page
  • Background map behind a header / footer

When not to use it

  • Multi-pin or interactive map — the block renders one address

    • only

  • Custom map styling beyond Color / Grey — you'd need a Code block

    • with a custom embed

Settings

Address — text input (default: 1600 Amphitheatre Parkway, Mountain View, CA)

The address to centre the map on. Plain text — the engine geocodes it.

Shape — Rectangle · Circle (default: Rectangle)

Map outline shape. Circle hides the Width and Radius sliders (circle has its own implicit shape).

Style — Color · Grey (default: Color)

  • Color — full-colour Google Maps style
  • Grey — desaturated greyscale rendering (matches Instinctor's

    • greyscale UI)

Sliders

  • Zoom — 1–20 (default: 14). Map zoom level. 1 = whole world,

    • 20 = building level.

  • Height — 100–800px (default: 400).
  • Width (Rectangle only) — 20–100% (default: 100).
  • Radius (Rectangle only) — 0–50px (default: 0). Corner

    • roundness.

Width and Radius are hidden when Shape is Circle.

Position — Left · Center · Right (default: Center)

Horizontal alignment of the map within its container, when Width is less than 100%.

Per-device overrides

Shape, Style, sliders, and Position have per-device values.

Common overrides:

  • Height — smaller on mobile (250–300px)
  • Zoom — sometimes one step out on mobile so a wider area is

    • visible at the smaller size

Common patterns

Contact-page map

Address: full street address · Shape Rectangle · Style Grey · Zoom 16 · Height 400 · Width 100 · Radius 8 · Position Center.

Decorative venue map

Shape Circle · Style Color · Zoom 17 · Height 320 · Position Right. Pair with a Heading + Text on the left.

Greyscale background map

Shape Rectangle · Style Grey · Zoom 13 · Height 600 · Width 100 · Radius 0. Layer text on top using Section background + overlay opacity.

Related

  • blocks/image — when a static map screenshot is enough (no

    • interactivity)

  • blocks/section — wrap Map in a Section to layer other content

    • on top