15. Oktober 2023

Einfaches Google Maps Opt-in

Mit folgendem Snippet kannst du ein einfaches Google Maps Opt-in umsetzen. Der User muss der Nutzung von Google Maps aktiv zustimmen. Daten werden erst an Google übertragen, wenn er auf den Button geklickt hat.

<div style="height:50vh;">
   <iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d48372.1183861855!2d-74.02556927921822!3d40.7343613552717!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sde!2sde!4v1697267611185!5m2!1sde!2sde" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" id="maps_iframe"></iframe>
   <div class="map_opt_in" style="text-align: center; padding:100px 30px; position:absolute; top:0; bottom:0; width:100%; background: #ccc; background-size:cover;">
      <p style="padding-bottom:20px; max-width:100%; color:#111;">Zum Aktivieren der eingebetteten Karte bitte auf den Button klicken. <br class="desktop" />Durch das Aktivieren werden Daten an Google übermittelt.</p>
      <a href="#!" id="btn_showmap" style="padding:10px 20px; background-color: #004280; color:#fff;">Karte anzeigen</a>
   </div>
</div>
<script>
   jQuery('#btn_showmap').click(function(e){
   e.preventDefault();
   var mapssrc = jQuery('#maps_iframe').attr('data-src');
   jQuery('#maps_iframe').attr('src', mapssrc);
   jQuery('.map_opt_in').hide();
   });
</script>Code-Sprache: HTML, XML (xml)