JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div id="panohint" class="ce_text"><p><strong>360 Grad Ansicht aktivieren</strong><br>
Diese Website nutzt eine 360 Grad Ansicht von Google Maps – <a id="confirm" href="#">klicken Sie hier</a>, um die Ansicht zu aktivieren. Ich stimme zu, dass mit der Nutzung Daten an Google ü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="panorama" style="width: 100%; height: 400px">
</div>

CSS

#panorama
{
  display:none;
  position:relative;
}
/*
.notice p {
  position:absolute;
  z-index:10;
  top:35px;
  right:0;
  padding:5px;
  background-color: #222222;
  opacity: 0.8;
  font-family: Roboto,Arial;
  color:#FFF;
  font-size: 10px;
}
*/

JavaScript

/*Panorama View mit Rotation aktivieren nach Klick*/
(function ($) {
function initializepano() {
		$("#panohint").fadeOut();
    $("#panorama").fadeIn();
    $.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBS8DSa3oDGOXUyyjwshc_ji8kgC-BS_Z8").done(function() {
    function myPano(){   
      var	pano;
      var	latlng = new google.maps.LatLng(52.4101144,12.5594437);
      var panoOptions = {
        position: latlng,
        pov: {
          heading: 0,
            pitch: 0.5
        },
        zoom: 0
      };
      pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
      function rotate() {
        timer = window.setInterval(function() {
          var pov = pano.getPov();
          pov.heading += 0.2;
          pano.setPov(pov);
        }, 50);
      }
      rotate();
      $("#panorama").append("<div class='notice'></div>");
      
      $("#panorama").mouseenter(function() {
      $("#panorama .notice").html("<p style='position:absolute;z-index:10;top:35px;right:0;padding:5px;background-color:#222222;opacity:0.8;  font-family:Roboto,Arial;color:#FFF;font-size: 10px;'>Rotation: aus</p>");
        window.clearInterval(timer);
      });
      $("#panorama").mouseleave(function() {
      $("#panorama .notice").html("<p style='position:absolute;z-index:10;top:35px;right:0;padding:5px;background-color:#222222;opacity:0.8;  font-family:Roboto,Arial;color:#FFF;font-size: 10px;'>Rotation: an</p>");
        rotate();
      });
    } //myPano
      myPano();
  }); //done function
} //initialize
$(document).ready(function(){
    $('#confirm').click(function(event){
      event.preventDefault();
      initializepano();
    });
});
}(jQuery));