JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="panoid"></div>
<div id="position"></div>
<div id="map-canvas"></div>
<div id="img"></div>

CSS

#map-canvas{
  height: 400px;
  width: 100%;
  display:none;
}

#panel {
  position: absolute;
  top: 5px;
  left: 70%;
  width: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #e4e4e4;
  opacity: 0.85;
}

JavaScript

var map;
var panorama;
var sv = new google.maps.StreetViewService();

function initialize() {

  // Set up the map
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  panorama = map.getStreetView();
  panorama.setPano("F:-2eRkGOODHZg/VtKZ7EGeepI/AAAAAAAADLY/Fvhw3HeTfXcAVq0wuHxq22LnoTtpeUx2A")
  panorama.setPov( /** @type {google.maps.StreetViewPov} */ ({
    heading: -45,
    pitch: 0
  }));
  panorama.setVisible(true);
  google.maps.event.addListener(panorama, 'position_changed', function() {
    document.getElementById('panoid').innerHTML = panorama.getPosition().toUrlValue(6);
  });
var imgLink = "https://maps.googleapis.com/maps/api/streetview?size=640x540&pano="+"F:-2eRkGOODHZg/VtKZ7EGeepI/AAAAAAAADLY/Fvhw3HeTfXcAVq0wuHxq22LnoTtpeUx2A";
$('#img').attr('src',imgLink);
}

google.maps.event.addDomListener(window, 'load', initialize);