JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View Events</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#pano {
width: 420px;
height: 315px;
float: left;
}
#floating-panel {
width: 400px;
height: 100%;
float: left;
text-align: left;
overflow: auto;
position: static;
border: 0px solid #999;
}
</style>
<!-- 下列這行其實應該是不需要的
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true"></script>
-->
</head>
<body>
<div id="pano"></div>
<div id="floating-panel">
<table>
<tr>
<td><b>Position</b></td><td id="position-cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading-cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch-cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano-cell"> </td>
</tr>
<table id="links_table"></table>
</table>
</div>
<script>
function initPano() {
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: {lat: 24.123414, lng: 120.678641},
pov: {
heading: 270,
pitch: 0
},
visible: true
});
panorama.addListener('pano_changed', function() {
var panoCell = document.getElementById('pano-cell');
panoCell.innerHTML = panorama.getPano();
});
panorama.addListener('links_changed', function() {
var linksTable = document.getElementById('links_table');
while...