Statt direktem iframe zuerst ein gestalteter Platzhalter mit Hinweistext und „Karte laden“-Knopf;
erst der Klick erzeugt das <iframe loading="lazy">, die Wahl wird in localStorage gemerkt.
So fließen keine Daten zu Google (USA), bevor eingewilligt wurde — Pflicht nach TDDDG (§ 25, Zugriff auf das Endgerät)
und DSGVO (Drittland-Übermittlung). In dieser Demo lädt bewusst eine Attrappe (Karten-Raster statt echtem
Google-iframe) — DSGVO/offline-sicher; im Projekt die echte Maps-URL einsetzen. Vorbild: Hauszeit, Nördlicht, Bernstein.
<div class="fx-map" id="fxMap">
<div class="fx-map-consent" id="fxMapConsent">
<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M24 42s-13-12-13-22a13 13 0 0 1 26 0c0 10-13 22-13 22z"/><circle cx="24" cy="20" r="5"/></svg>
<h4>Karte (Google Maps)</h4>
<p>Beim Laden werden Daten an Google in den USA übermittelt. Bitte willigen Sie gemäß
<a href="datenschutz.html">Datenschutzerklärung</a> ein.</p>
<button type="button" class="fx-map-btn" data-map-load>Karte einmalig laden</button>
</div>
</div>
<style>
.fx-map{position:relative;width:320px;max-width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
border:1px solid #26262c;background:#16161a}
.fx-map iframe{width:100%;height:100%;border:0;display:block}
.fx-map-consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:12px;text-align:center;padding:22px;
background:repeating-linear-gradient(45deg,#17171b,#17171b 11px,#1c1c22 11px,#1c1c22 22px)}
.fx-map-consent svg{width:34px;height:34px;fill:none;stroke:var(--akzent, #7c87ff);stroke-width:1.6}
.fx-map-consent h4{margin:0;font-size:.95rem;color:#f4f4f5}
.fx-map-consent p{margin:0;max-width:280px;font-size:.82rem;color:#a1a1aa;line-height:1.5}
.fx-map-consent a{color:var(--akzent, #7c87ff);text-decoration:underline}
.fx-map-btn{font:inherit;font-size:.82rem;cursor:pointer;color:#fff;background:var(--akzent, #7c87ff);
border:0;border-radius:8px;padding:.55rem 1.2rem;transition:filter .2s ease,transform .15s ease}
.fx-map-btn:hover,.fx-map-btn:focus-visible{filter:brightness(1.12);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.fx-map-btn{transition:none}.fx-map-btn:hover{transform:none}}
</style>
<script>
(function(){
var KEY='consent-maps';
var wrap=document.getElementById('fxMap');
if(!wrap) return;
// Echten iframe einsetzen (NUR nach Zustimmung aufgerufen)
function buildMap(){
if(wrap.querySelector('iframe')) return;
var iframe=document.createElement('iframe');
// Im Projekt: echte Google-Maps-URL eintragen, z. B.
// iframe.src='https://www.google.com/maps?q=Musterstra%C3%9Fe%201%2C%20Hamburg&output=embed';
iframe.src='https://www.google.com/maps?q=Hamburg&output=embed';
iframe.title='Standort auf der Karte';
iframe.loading='lazy';
iframe.setAttribute('referrerpolicy','no-referrer-when-downgrade');
iframe.setAttribute('allowfullscreen','');
wrap.innerHTML='';
wrap.appendChild(iframe);
}
// Klick auf „Karte laden“: Wahl merken + Karte bauen
wrap.querySelector('[data-map-load]').addEventListener('click',function(){
try{ localStorage.setItem(KEY,'accept'); }catch(e){}
buildMap();
});
// Beim erneuten Besuch: war schon zugestimmt? -> direkt laden
var stored=null;
try{ stored=localStorage.getItem(KEY); }catch(e){}
if(stored==='accept') buildMap();
})();
</script>