> ## Documentation Index
> Fetch the complete documentation index at: https://docs.boxpressd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Maps

> Display Boxpressd business locations and directions on your website.

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.

```tsx id="ochdhk" theme={null}
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

```tsx id="8ao53l" theme={null}
<BoxpressdMap
  height={520}
  zoom={15}
  showOverlay
  showDirectionsLink
/>
```

## Example: Compact Map

```tsx id="7atdjc" theme={null}
<BoxpressdMap
  height={320}
  zoom={14}
  showDirectionsLink
/>
```

## Example: Full-Width Section

```tsx id="cu4291" theme={null}
<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.

```tsx id="xbdcsr" theme={null}
<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.

```tsx id="dnmof9" theme={null}
<BoxpressdMap
  showDirectionsLink
/>
```

This is especially useful on:

* Contact pages
* Visit pages
* Event pages
* Location sections
* Mobile landing pages

## Use address directly

```tsx id="dnmof97" theme={null}
<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.

```css id="c22bx9" theme={null}
:root {
  --bxp-primary: #d3a966;
  --bxp-border-radius: 16px;
}
```

## Scoped Styling

```tsx id="8amzap" theme={null}
<section className="contact-map">
  <BoxpressdMap
    height={500}
    showOverlay
  />
</section>
```

```css id="4e2c8i" theme={null}
.contact-map {
  --bxp-primary: #d3a966;
  --bxp-card-background: #ffffff;
  --bxp-card-foreground: #1f1f1f;
  --bxp-border-radius: 18px;
}
```

## Common Use Cases

### Contact Page

```tsx id="sysw34" theme={null}
<BoxpressdMap
  height={520}
  zoom={15}
  showOverlay
  showDirectionsLink
/>
```

### Homepage Location Section

```tsx id="r5zc8j" theme={null}
<section>
  <h2>Visit Us</h2>

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

### Event Details Page

```tsx id="21kjp8" theme={null}
<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