Marco
ac6c3d6b71
Uses Klaro's own built-in contextual-consent mechanism (not loadTrackingCode.ts's script-injection path) — the iframe renders with data-name="google-maps" and its real src; Klaro's DOM scan finds it after mount and blanks/restores src based on that service's consent state, showing its own placeholder (styled via KlaroConsentManager.tsx's KlaroTheme) in the meantime. No map embedded anywhere in the app yet — this is prep work only, per explicit request ahead of an actual page needing one. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
// Server Component — no "use client" needed. The consent gating itself
|
|
// happens entirely client-side inside Klaro (KlaroConsentManager.tsx),
|
|
// not via any React state here: Klaro's own contextual-consent DOM scan
|
|
// (renderContextualConsentNotices, runs as part of Klaro.render()) finds
|
|
// this iframe by its `data-name="google-maps"` attribute after mount,
|
|
// blanks its `src` and inserts its own "Karte laden?" placeholder in
|
|
// front of it until that service's consent is granted, then restores the
|
|
// real `src`. See klaroConfig.ts's own comment on the "google-maps"
|
|
// service this depends on — a `tracking-codes` row with that provider
|
|
// must exist and be `active`, or Klaro never gates (and never un-blanks)
|
|
// this iframe at all.
|
|
//
|
|
// `width`/`height` are real HTML attributes, not just the Tailwind aspect-
|
|
// ratio wrapper below — Klaro reads `element.width`/`element.height` (the
|
|
// DOM attributes) to size its own placeholder box before the real iframe
|
|
// has rendered, so both need to be present even though the wrapper's
|
|
// `aspect-[...]` class is what actually controls layout.
|
|
export function GoogleMapsEmbed({
|
|
src,
|
|
title,
|
|
className,
|
|
}: {
|
|
/** A full Google Maps embed URL (Google Maps → Teilen → Karte einbetten
|
|
* → "HTML kopieren" → the `src` attribute of that iframe), e.g.
|
|
* "https://www.google.com/maps/embed?pb=...". */
|
|
src: string;
|
|
title: string;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div className={`relative w-full aspect-[16/9] overflow-hidden rounded-md border border-border ${className ?? ""}`}>
|
|
<iframe
|
|
data-name="google-maps"
|
|
src={src}
|
|
title={title}
|
|
width={800}
|
|
height={450}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
className="absolute inset-0 h-full w-full border-0"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|