GoogleMapFrame.astro

@components/blocks/GoogleMapFrame.astro

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

Live Walk-ins welcome
Open today
Mon–Fri 9:00–17:30 · Sat 10:00–16:00

Map provided by Google Maps.

        <GoogleMapFrame />
      

Start on a specific location

Start on Chester

Live Walk-ins welcome
Open today
Mon–Fri 9:00–17:30 · Sat 10:00–16:00

Map provided by Google Maps.

        <GoogleMapFrame defaultKey="chester" />
      

Custom badges and status text

Custom badges + status

Live
Open now
Mon–Fri 9:00–17:30 · Sat 10:00–16:00

Map provided by Google Maps.

        <GoogleMapFrame badges={["Live"]} openBadgeText="Open now" />
      

Single location (tabs hidden automatically)

Single location

Live Walk-ins welcome
Open today
Mon–Fri 8:00–16:00

Map provided by Google Maps.

        <GoogleMapFrame
locations={[
  {
    key: "warehouse",
    label: "Warehouse",
    address: "Unit 4, Example Park, CH4 2AB",
    hours: "Mon–Fri 8:00–16:00",
    phone: "+441515550000"
  }
]}
/>
      

Free shipping over £60.00

Delivered with care. No code needed.