JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="street-view"></div>

CSS

html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
 }
 
 #street-view {
   height: 100%;
 }

JavaScript

var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

function initPanorama() {

  panorama = new google.maps.StreetViewPanorama(document.getElementById('street-view'));
  //panorama.registerPanoProvider(panoProvider,{cors:true});
  panorama.setOptions({
    pano: outsideGoogle.location.pano
  });
  //EACH PANO CHANGE TRIGGERS TWO PANO_CHANGED EVENTS
  //1ST ONE BEFORE TRANSITION ANIMATION
  //2ND ONE AFTER TRANSITION ANIMATION.
  panorama.addListener('pano_changed', function() {
     console.log({panoid:panorama.getPano()})
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService();
  streetviewService.getPanorama({
      location: {
        lat: -33.867386,
        lng: 151.195767
      }
    },
    function(result, status) {
      if (status === 'OK') {
        console.log(result);
        outsideGoogle = result;
        initPanorama();
      }
    });
}
initialize();