JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
<div id='title-bar'>Quay Street Recall
    <table>
        <tr>
            <td><b>POV Heading</b></td><td id="heading_cell">0.0</td>
        </tr>
        <tr>
            <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
        </tr>
        <tr>
            <td><b>Zoom</b></td><td id="zoom_cell">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
    </table></div>
<div id='map-canvas'></div>

CSS

html { 
    height: 100% 
}
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
    font-family: verdana; 
    background-color: 
    burlywood;
}

#map-canvas { 
    height: 80% 
}

#title-bar { 
    height: 15% 
}

.images {
    position: absolute;
    top: 100px;
    left: 496px;
    max-width: 354px;
    margin: 0 auto;
    cursor: pointer;
    display: none;
}

#slider-horizontal {
    max-width: 354px;
    margin: 0 auto;
    cursor: pointer;
    top: 40%;
}

.images img {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 354px;
}

#title-bar {
    font-size: 12px;
}

#content {
    width: 550px;
    height: 700px;
}

JavaScript

$(document).ready(function() {

    function renderMap(){
        
        var myLatlng = new google.maps.LatLng(-33.88634,151.207599);
        var myOptions = {
            zoom: 18,
            center: myLatlng,
            zoom:18,
	panControl:false,
	zoomControl:true,
	mapTypeControl:false,
	scaleControl:false,
	streetViewControl:true,
	overviewMapControl:false,
	scrollwheel: false,
	rotateControl:false,
	styles: [
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#000000" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": [
      { "weight": 2.3 }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]
  };
            
        
        
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        var iconBase = 'http://rmarks.org/wp-content/themes/robertsonmarks/images/';
        
        var markerPos = new google.maps.LatLng(-33.88634,151.207599);
    
        var marker = new google.maps.Marker({
           position: markerPos,
           map: map,
           title: "Robertson + Marks",
           icon: iconBase + 'map_pin_small.png'
        });
var pano = null;
        google.maps.event.addListener(marker, 'click', function() {
            map.setZoom(18);
            map.setCenter(marker.getPosition());
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            pano = new...