JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div id="map" style="width: 100%; height: 400px">
</div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBS8DSa3oDGOXUyyjwshc_ji8kgC-BS_Z8"></script>

<script>
/* This work by D. Hupp is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. */
  var map;
  var timer;
  var interval = 10;
  var pitch = 0.05;
  var latlng = new google.maps.LatLng(52.4077215, 12.561042);

  var mapOptions = {
    position: latlng,
    pov: {
      heading: 0,
      pitch: 0
    }
  };

  map = new google.maps.StreetViewPanorama(document.getElementById("map"), mapOptions);

  var mapcanvas = document.getElementById("map");

  function spinIt() {
    try {
      var pov = map.getPov();
      pov.heading += pitch;
      while (pov.heading > 360.0) {
        pov.heading -= 360.0;
      }
      while (pov.heading < 0.0) {
        pov.heading += 360.0;
      }

      map.setPov(pov);
    } catch (e) {}
  }

  function spin_off() {
    clearTimeout(timer);
  }

  function spinning() {
    clearTimeout(timer);
    timer = setInterval("spinIt()", interval);
  }

  if (mapcanvas.onmouseover == null) {
    spinning();
  }
  mapcanvas.onmouseover = spin_off;
  mapcanvas.onmouseout = spinning;

</script>

JavaScript

//Google Street View auto rotation