JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

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(53.270433, -9.054760999999985);
        var myOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        var iconBase = 'http://quaystreet.chrisloughnane.net/images/';
        
        var markerPos = new google.maps.LatLng(53.270433, -9.054760999999985);
    
        var marker = new google.maps.Marker({
           position: markerPos,
           map: map,
           title: "Street Recal",
           icon: iconBase + 'camera_small.png'
        });
var pano = null;
        google.maps.event.addListener(marker, 'click', function() {
            map.setZoom(19);
            map.setCenter(marker.getPosition());
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), {
                navigationControl: false,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
                enableCloseButton: true,
                addressControl: false,
                linksControl: false,
                panControl: false,
                clickToGo: false,
                scrollwheel: true,
                draggable: false,
                pov: {
                        heading: 24.061926972355707,
                        pitch: 1.942235903158224,
                        zoom: 1.5
                }
            });
            pano.bindTo("position", marker);
            pano.setVisible(true);
            /* THIS IS PLACED HERE TO JUST SHOW SETTINGS CAN BE DISPLAY */
            document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
            document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
           ...