Standard Components

Address Map

Built

Displays an interactive map centered on the record's address. Shows a location pin with the full address below the map. Used on object pages where location context helps users understand where work is happening.

Author: Design TeamUpdated: 2026-03-06

Usage Guidance

When to use

  • +Showing location context on job or activity records.
  • +Providing at-a-glance geographic reference without leaving the page.
  • +Records with a primary address field that benefits from visual mapping.

When not to use

  • −Records without address data — use a different component or hide the card.
  • −When multiple addresses need comparison — use a multi-pin map or list view.
  • −Dense layouts where map interactivity would conflict with page scrolling.

Breeze UI Adherence

72
Breeze UI Adherence
Good
72% of styling uses Breeze UI tokens

Tokens Used

color4 tokens
color.border.default
Card border, footer divider
border-color
color.background.surface
Card background
background-color
color.text.default
Card header title text
color
color.text.subtle
Address text in footer, location icon
color
spacing1 token
spacing.5
Header and footer horizontal padding (20px)
padding-inline
sizing1 token
spacing.3.5
Header and footer height (56px / 3.5rem)
height
typography3 tokens
font.size.sm
Header title (14px)
font-size
font.weight.semibold
Header title weight (600)
font-weight
font.size.sm
Footer address text (14px)
font-size
radius1 token
radius.lg
Card corner radius (8px)
border-radius
shadow1 token
shadow.sm
Card elevation shadow
box-shadow

Custom CSS — not covered by Breeze UI

⚠Map container
aspect-ratio: 16 / 9

Map container aspect ratio — Breeze UI does not provide an aspect-ratio token. Used to maintain consistent map proportions across widths.

⚠Map iframe
pointer-events: none

Disables map interaction (pan/zoom/click) in the preview. No Breeze UI equivalent — this is a behavioral CSS property.

⚠Map container
overflow: hidden (clip region)

Crops the Google Maps iframe to hide third-party UI chrome (attribution bar, fullscreen button). Custom layout technique not covered by Breeze UI.

⚠Location pin marker
w-5 h-5 bg-blue-500 rounded-full border-[3px] border-white shadow-lg

Custom location pin marker. Breeze UI does not have a map marker component — this uses Tailwind utilities for a blue dot with white border matching the design spec.

⚠Location pin pulse ring
animate-ping opacity-20

Subtle ping animation on the location marker. Breeze UI does not provide animation tokens — uses Tailwind's built-in ping keyframe.

Widths
1/31/2defaultFull
Object Pages
JobsActivities

Settings

addressFieldtext*

The object field that contains the formatted address string. Used for display in the footer and as a fallback for geocoding when no coordinate fields are set.

Default: Address
geoLatitudeFieldtext

The object field that contains the latitude coordinate. When set alongside geoLongitudeField, the map pins directly to these coordinates instead of geocoding the address.

Default: GeoLocation.Latitude
geoLongitudeFieldtext

The object field that contains the longitude coordinate. Must be set together with geoLatitudeField for coordinate-based pin placement.

Default: GeoLocation.Longitude
initialZoomnumber

Initial zoom level of the map. Range 1 (world view) to 20 (building level).

Default: 14
showAddressTextboolean

Display the formatted address as text below the map. When disabled, only the map and pin are shown.

Default: true

Attributes

addressstring

The full formatted address string resolved from the field specified in addressField. Displayed in the card footer and used as a geocoding fallback.

geoLocationGeoLocation

Latitude and longitude coordinates resolved from geoLatitudeField and geoLongitudeField. Used for precise map pin placement. Falls back to geocoding the address when not available.

{ lat: number, lng: number }
recordIdstring

The UID of the parent record. Automatically bound by the page builder runtime — not user-configurable.

Changelog

2026-03-01v1.0

Initial component specification created.

2026-03-04v1.1

Added showAddressText setting. Defined initial zoom control.

2026-03-06v1.2

Added Breeze UI token mapping and adherence tracking. Updated pin marker to blue dot design.

2026-03-06v1.3

Replaced showExternalLink and mapStyle settings with field-binding settings (addressField, geoLatitudeField, geoLongitudeField). Component now configured via object field references.