Maps

The Boxpressd Sites SDK includes map components that help customers find lounges, retailers, event venues, and other business locations. Map components automatically use the business context resolved by the BoxpressdProvider.

Available Components

Component	Description
`BoxpressdMap`	Displays a map for the active business location.

BoxpressdMap

Use BoxpressdMap to display the active business location.

import { BoxpressdMap } from "@boxpressd/sites-sdk/maps"

export default function LocationSection() {
  return (
    <BoxpressdMap
      height={500}
    />
  )
}

Props

Prop	Type	Description
`height`	`number \| string`	Map height.
`zoom`	`number`	Initial map zoom level.
`showOverlay`	`boolean`	Displays a location details overlay.
`showDirectionsLink`	`boolean`	Displays a directions link.
`className`	`string`	Additional CSS classes.

Example: Contact Page Map

<BoxpressdMap
  height={520}
  zoom={15}
  showOverlay
  showDirectionsLink
/>

Example: Compact Map

<BoxpressdMap
  height={320}
  zoom={14}
  showDirectionsLink
/>

Example: Full-Width Section

<section className="location-map">
  <BoxpressdMap
    height="600px"
    showOverlay
  />
</section>

Business Context

The map automatically loads location data for the business associated with your API key. For a venue, this usually includes:

Business name
Street address
City
State
Postal code
Latitude and longitude
Google Maps directions link

For a brand, map behavior may vary depending on whether the brand has a public business location.

Location Overlay

When showOverlay is enabled, the map can display a card with business details.

<BoxpressdMap
  height={500}
  showOverlay
/>

Typical overlay information may include:

Business name
Address
Hours
Phone number
Directions link

Directions Links

When enabled, directions links can open the business location in Google Maps.

<BoxpressdMap
  showDirectionsLink
/>

This is especially useful on:

Contact pages
Visit pages
Event pages
Location sections
Mobile landing pages

Use address directly

<BoxpressdMap
  showCard={false}
  name="Stogies Cigar Lounge & Tap House"
  address={"401 Chapin Rd, Suite B\nChapin, SC 29036"}
  googleMapsUrl="https://www.google.com/maps/search/?api=1&query=401+Chapin+Rd+Suite+B+Chapin+SC+29036"
  mapEmbedUrl="https://www.google.com/maps?q=401+Chapin+Rd+Suite+B+Chapin+SC+29036&z=14&output=embed"
  height="100%"
  className="absolute inset-0 h-full w-full"
/>

Styling

Map components inherit Boxpressd theme variables.

:root {
  --bxp-primary: #d3a966;
  --bxp-border-radius: 16px;
}

Scoped Styling

<section className="contact-map">
  <BoxpressdMap
    height={500}
    showOverlay
  />
</section>

.contact-map {
  --bxp-primary: #d3a966;
  --bxp-card-background: #ffffff;
  --bxp-card-foreground: #1f1f1f;
  --bxp-border-radius: 18px;
}

Common Use Cases

Contact Page

<BoxpressdMap
  height={520}
  zoom={15}
  showOverlay
  showDirectionsLink
/>

Homepage Location Section

<section>
  <h2>Visit Us</h2>

  <BoxpressdMap
    height={420}
    showDirectionsLink
  />
</section>

Event Details Page

<BoxpressdMap
  height={360}
  zoom={15}
  showDirectionsLink
/>

Best Practices

Use the map on contact and visit pages.
Include directions links for mobile visitors.
Use an overlay when the map is the main location section.
Keep compact maps shorter on homepages.
Use larger maps on dedicated contact pages.
Gracefully hide the map if no location data is available.

Troubleshooting

Map Does Not Appear

Verify:

The provider is configured correctly.
The API key belongs to the expected business.
The business has location data.
The map container has a valid height.

Directions Link Is Missing

Verify:

The business has a valid address.
Latitude and longitude are configured.
showDirectionsLink is enabled.

Overlay Is Missing

Verify:

showOverlay is enabled.
The business has public location details available.

Next Steps

Continue to:

Events
Reviews
Check-ins
Sessions
Theming

Getting started

Core concepts

Components

Data fetching

Examples

Available Components

BoxpressdMap

Props

Example: Contact Page Map

Example: Compact Map

Example: Full-Width Section

Business Context

Location Overlay

Directions Links

Use address directly

Styling

Scoped Styling

Common Use Cases

Contact Page

Homepage Location Section

Event Details Page

Best Practices

Troubleshooting

Map Does Not Appear

Directions Link Is Missing

Overlay Is Missing

Next Steps

​Available Components

​BoxpressdMap

​Props

​Example: Contact Page Map

​Example: Compact Map

​Example: Full-Width Section

​Business Context

​Location Overlay

​Directions Links

​Use address directly

​Styling

​Scoped Styling

​Common Use Cases

​Contact Page

​Homepage Location Section

​Event Details Page

​Best Practices

​Troubleshooting

​Map Does Not Appear

​Directions Link Is Missing

​Overlay Is Missing

​Next Steps

Available Components

BoxpressdMap

Props

Example: Contact Page Map

Example: Compact Map

Example: Full-Width Section

Business Context

Location Overlay

Directions Links

Use address directly

Styling

Scoped Styling

Common Use Cases

Contact Page

Homepage Location Section

Event Details Page

Best Practices

Troubleshooting

Map Does Not Appear

Directions Link Is Missing

Overlay Is Missing

Next Steps