Skip to main content
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

ComponentDescription
BoxpressdMapDisplays 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

PropTypeDescription
heightnumber | stringMap height.
zoomnumberInitial map zoom level.
showOverlaybooleanDisplays a location details overlay.
showDirectionsLinkbooleanDisplays a directions link.
classNamestringAdditional 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
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

​
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.
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