Google Maps Embed

Add a dark-themed map to the contact page showing the business location.

---

Get the embed URL

1. Open Google Maps
2. Search for the business
3. Click Share -> Embed a map
4. Copy the src value from the <iframe> code

---

Embed code

<div class="rounded-2xl overflow-hidden border border-white/7" style="height: 360px;">
  <iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="100%"
    height="100%"
    style="border:0; filter: invert(90%) hue-rotate(180deg);"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    title="Business Name location on Google Maps"
  ></iframe>
</div>

The CSS filter invert(90%) hue-rotate(180deg) converts the map to a dark theme that matches the site’s dark background.

---

CSP update required

Add https://www.google.com to frame-src in public/_headers:

frame-src https://sdk.cashfree.com https://www.google.com;

Without this, the browser will block the iframe and the map will be blank.

---

Where to place it

On the contact page (/contact), below the contact form and contact info section. Full width, spanning the page container.

---

Notes

• The embed src URL is tied to the Google Maps listing. Get it from the real listing (Share -> Embed), not by constructing the URL manually.
• loading="lazy" means the iframe only loads when scrolled into view - good for page performance.
• title attribute is required for accessibility (screen readers announce it).