JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo Project : Street View Overlay</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
	<!--這一行先註解掉
    <script type="text/javascript" src="streetviewoverlay.js"></script>
	-->
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', loadPage);

// 這一部分是直接將streetviewoverlay.js的程式碼複製在此
var svo = null;

// the main application object
function SVO()
{
	// Trafalgar Square
	this.lat = 51.507768;
	this.lng = -0.127957;
	this.zoom = 16;

	this.slat = 51.507527;
	this.slng = -0.128652;

	this.image = "img/slidecat.gif";

	this.pt = new google.maps.LatLng(this.lat, this.lng);
	this.streetPt = new google.maps.LatLng(this.slat, this.slng);

	// initial POV
	this.sheading = 69.58;
	this.spitch = 0;
	this.szoom = 1;

	this.distance = 0;  // distance in metres from street view to marker
	this.maximumDistance = 200;     // distance beyond which marker is hidden

	// dimensions of street view container (fixed)
	this.panWidth = 480;
	this.panHeight = 480;

	// dimensions of marker container (resized according to current pov)
	this.markerWidth = 120;
	this.markerHeight = 80;
}


// create map
SVO.prototype.m_initMap = function ()
{
	var mapDiv = eid("mapDiv");

	var mapOptions =
	{
		center: this.pt,
		zoom: this.zoom,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true,
		mapTypeControl: false
	};

	map = new google.maps.Map(mapDiv, mapOptions);
}


// create street view
SVO.prototype.m_initPanorama = function ()
{
	var visible = false;
	var l_panDiv = eid("panDiv");

	// controls can be hidden here to prevent the position being changed by the user
	var l_panOptions =
	{
		// zoomControl: false,
		// linksControl: false
	};

	l_panOptions.position =...

JavaScript

var svo = null;

// the main application object
function SVO()
{
    // Trafalgar Square
    this.lat = 51.507768;
    this.lng = -0.127957;
    this.zoom = 16;

    this.slat = 51.507527;
    this.slng = -0.128652;

    this.image = "img/slidecat.gif";

    this.pt = new google.maps.LatLng(this.lat, this.lng);
    this.streetPt = new google.maps.LatLng(this.slat, this.slng);

    // initial POV
    this.sheading = 69.58;
    this.spitch = 0;
    this.szoom = 1;

    this.distance = 0;  // distance in metres from street view to marker
    this.maximumDistance = 200;     // distance beyond which marker is hidden

    // dimensions of street view container (fixed)
    this.panWidth = 480;
    this.panHeight = 480;

    // dimensions of marker container (resized according to current pov)
    this.markerWidth = 120;
    this.markerHeight = 80;
}


// create map
SVO.prototype.m_initMap = function ()
{
    var mapDiv = eid("mapDiv");

    var mapOptions =
    {
        center: this.pt,
        zoom: this.zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
        mapTypeControl: false
    };

    map = new google.maps.Map(mapDiv, mapOptions);
}


// create street view
SVO.prototype.m_initPanorama = function ()
{
    var visible = false;
    var l_panDiv = eid("panDiv");

    // controls can be hidden here to prevent the position being changed by the user
    var l_panOptions =
    {
        // zoomControl: false,
        // linksControl: false
    };

    l_panOptions.position = this.streetPt;
    l_panOptions.pov =
    {
        heading: this.sheading,
        pitch: this.spitch,
        zoom: this.szoom
    };

    pan = new google.maps.StreetViewPanorama(l_panDiv, l_panOptions);

    map.setStreetView(pan);

    // event handlers    
    google.maps.event.addListener(pan, 'pov_changed', function ()
    {
        svo.m_updateMarker();
    });

    google.maps.event.addListener(pan, 'zoom_changed', function ()
    {
       ...