GoogleMapFrame.astro
A DaisyUI-styled Google Maps embed with optional multiple locations (tabs).
Reads sensible defaults from src/content/data/contact.json
, but you can override via props in MDX or on a hard-wired .astro
page.
Props
locations
:{ key, label, address, hours?, phone?, query? }[]
defaultKey
: string — which location is active first (defaults to first)badges
: string[] — top-right corner badges (e.g.["Live","Walk-ins welcome"]
)openBadgeText
: string — small badge below map (e.g."Open today"
)
Defaults are read from src/content/data/contact.json
.
{
"defaultKey": "west-kirby",
"openBadgeText": "Open today",
"badges": ["Live", "Walk-ins welcome"],
"locations": [
{
"key": "west-kirby",
"label": "West Kirby",
"address": "123 Market Street, West Kirby, CH48 1AA",
"hours": "Mon–Fri 9:00–17:30 · Sat 10:00–16:00",
"phone": "+441515551234",
"query": "123 Market Street, West Kirby"
},
{
"key": "chester",
"label": "Chester",
"address": "5 Foregate St, Chester, CH1 1AA",
"hours": "Mon–Fri 9:00–17:30 · Sat 10:00–16:00",
"query": "5 Foregate St, Chester"
}
]
}
MDX usage
Default (reads from contact.json)
Default
Map provided by Google Maps.
<GoogleMapFrame />
Start on a specific location
Start on Chester
Map provided by Google Maps.
<GoogleMapFrame defaultKey="chester" />
Custom badges and status text
Custom badges + status
<GoogleMapFrame badges={["Live"]} openBadgeText="Open now" />
Single location (tabs hidden automatically)
Single location
<GoogleMapFrame
locations={[
{
key: "warehouse",
label: "Warehouse",
address: "Unit 4, Example Park, CH4 2AB",
hours: "Mon–Fri 8:00–16:00",
phone: "+441515550000"
}
]}
/>