JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div id="hint" class="ce_text"><p><strong>Fussball.de Daten aktivieren</strong><br>
Diese Website nutzt Ergebnisse &amp; Spielplan Daten von Fußball.de – <a id="confirm" href="#">klicken Sie hier</a>, um es zu aktivieren. Ich stimme zu, dass mit der Nutzung Daten an Fußball.de übertragen werden. Hinweis: Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer <a href="impressum-datenschutz.html">Datenschutzerklärung</a>.</p></div>
<div id="map-canvas"></div>

CSS

#map-canvas {
  height: 300px;
  width: 300px;
  display: none;
}

JavaScript

/*Google Map aktivieren nach Klick*/
(function ($) {
function initialize() {
		$("#hint").fadeOut();
    $("#map-canvas").fadeIn();
    $.getScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyBwEFY6s7keNIHGdZ65R-nFdBcWYl4EBuo").done(function() {
      function myMap() {
        var myCenter = new google.maps.LatLng(52.476323, 12.840010);
        var mapCanvas = document.getElementById("map-canvas");
        var mapOptions = {center: myCenter, zoom: 15};
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({position:myCenter});
        marker.setMap(map);
        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      }
      myMap();
  });
}

$(document).ready(function(){
    $('#confirm').click(function(event){
      event.preventDefault();
      initialize();
    });
});
}(jQuery));