Google Maps URL Pano ID Extractor by arnicas

index.js

const $panorama = document.getElementById('street-view');
const $zoom = document.getElementById('zoom');
const $url = document.getElementById('url');
const $panoID = document.getElementById('panoID');

const panorama = new google.maps.StreetViewPanorama($panorama, {
  pov: {heading: 0, pitch: 0},
  zoom: 1
});

function processURL() {
  const url = decodeURIComponent($url.value);
  const match = url.match("^https:\/\/.*\!1s(.*)\!2e.*$");
  let id = match && match[1];
  let latlng = ['None', 'None'];
  latlng = url.match(/@([\d]*\.[\d]*),(-?[\d]*\.[\d]*),/);
  let pov = url.match(/,([0-9.]+)y,([0-9.]+)h,([0-9.]+)t/);
  
  if (id){
    if (id[0] == '-') {
      id ='F:' + id;
    }
    
    const lat = latlng[1];
    const lng = latlng[2];
    $panoID.innerText = `loc:{lat: ${lat}, lng: ${lng}},`;
    $panoID.innerText += ' pano: {id:\"' + id + '\",';
    panorama.setPano(id);
    
    if (pov) {
      const heading = Number(pov[2]);
      const pitch = Number(pov[3]);
      panorama.setPov({
        heading,
        pitch: pitch - 90
      });
      
      $panoID.innerText += ` heading: ${heading}, pitch: ${pitch - 90}}`;
    }
    
  } else {
    panorama.setPano(null)
    $panoID.innerText = 'No Pano ID found';    
  }
  
}

$url.addEventListener('input', processURL);
processURL();

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>StreetView URL Extractor</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <div id="hod">
      <input id="url" placeholder="Google Maps URL" value=""/>
      <pre id="panoID">Paste URL above</pre>
      <pre id="json"></pre>
    </div>
    <div id="street-view"></div>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="index.js"></script>
  </body>
</html>

styles.css

#url {
  width: 100%;
  display: block;
}

#panoID {
  margin: 0.5em 0 0 0 ;
}

#hod {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 160px;
  right: 0;
  background: rgba(255, 255, 255, 0.62);
  padding: 10px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#street-view {
  height: 100%;
}