JSFiddle - React, Tailwind, and code Playground

Street View Events + Google map

by abubelinha

HTML

<div id="pano"></div>
<div id="right">
<div id="mapa"><span>mapa</span>
</div>
<div id="floating-panel">
<table>
  <tr>
    <td><b>Position</b></td><td class="breaks" id="position-cell">&nbsp;</td>
  </tr>
  <tr>
    <td><b>POV Heading</b></td><td class="breaks" id="heading-cell">270</td>
  </tr>
  <tr>
    <td><b>POV Pitch</b></td><td class="breaks"id="pitch-cell">0.0</td>
  </tr>
  <tr>
    <td><b>Pano ID</b></td><td id="pano-cell">&nbsp;</td>
  </tr>
  <tr>
    <td><input type=button value=log></input></td><td class="breaks"id="DVD-cell" style="overflow:scroll;">&nbsp;</td>
  </tr>
  <table id="links_table"></table>
</table>
</div>
</div><!-- right div-->
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>

CSS

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  width:100%;
  margin: 0;
  padding: 0;
}

#right {
  float:left;
  top: 0px; height:100%;
  width:48%;
  background-color:black;
}
#mapa {
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */  position:relative;
  height: 49%; width:100%;
  background-color:yellow;
  border: 2px dashed red;
}

#pano {
  width: 50%;
  height: 100%;
  float: left;
}
#floating-panel {
  /*position: absolute;
  top: 10px;*/
  /*left: 25%;*/
  z-index: 5;
  background-color: #ddd;
  height: 49%;
  width:99%;

  text-align: left;
  overflow: scroll;
  /*position: static;*/
  border: 1px solid #999;
}
.breaks {
  word-break:break-all;
  font-size:10px;
}

JavaScript

var debug=false;
function getData(panorama,echo) {
  echo = (typeof echo === 'undefined' ? true : echo);
	var position=panorama.getPosition();
  if(debug) console.log("getPosition(): "+position + '');
  if(debug) console.log("getPano(): "+panorama.getPano() + '');
  if(debug) console.log("getLinks(): "+JSON.stringify(panorama.getLinks()) + '');
  if(debug) console.log("getPov(): "+JSON.stringify(panorama.getPov()) + '');
  var latlon=panorama.getPosition()+'';
  latlon=latlon.substring(1,latlon.length-1);
  var arrLL=latlon.split(", ");
  var lat=parseFloat(arrLL[0]).toFixed(8);
  var lon=parseFloat(arrLL[1]).toFixed(8);
  var heading=parseFloat(panorama.getPov().heading.toFixed(2));
  var objHeading= heading>180 ? (heading-180) : (heading+180);
  var pitch=parseFloat(panorama.getPov().pitch.toFixed(2));
  var zoom=parseFloat(panorama.getPov().zoom).toFixed(2);
  var fov=parseFloat(90/(zoom+1)).toFixed(2);
  var oldlink="http://www.google.com/maps?layer=c&cbll="+lat+","+lon+"&cbp=11,"+heading+",,"+zoom+","+pitch;
  if(debug) console.log(oldlink);
  /*
  https://stackoverflow.com/a/53072158/710788
  https://gis.stackexchange.com/a/134348/6315
  https://stackoverflow.com/a/28507174/710788
  */
  var glink="https://www.google.com/maps/@" +lat+","+lon +",3a,"+fov+"y,"+heading+"h,"+(pitch+90)+"t" +"/data=!3m6!1e1!3m4!1sJmW2DmZWQ2bIcAcHlky4-w!2e0!7i7680!8i3840";
  if(echo) console.log(glink);
  var datos={
  	"glink": glink, "oldlink": oldlink, 
    "pov": panorama.getPov(), "fov": fov, 
    "objHeading": parseFloat(objHeading).toFixed(2), 
    "lat": lat, "lon": lon 
  };
  datos.pov.heading=parseFloat(datos.pov.heading.toFixed(2));
  datos.pov.pitch=parseFloat(datos.pov.pitch.toFixed(2));
  datos.pov.zoom=parseFloat(datos.pov.zoom.toFixed(2));
  var dvdCell = document.getElementById('DVD-cell');
  dvdCell.innerHTML = JSON.stringify(datos) + "<br> <a href="+glink+" target=_blank>link</a>";
  posicionar(parseFloat(lat),parseFloat(lon));
  return(datos);
}
var...