StreetView URL Extractor
Paste a Google Maps URL and get back the parameters used to create a panorama.
<!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> | |
</div> | |
<div id="street-view"></div> | |
<script src="https://maps.googleapis.com/maps/api/js"></script> | |
<script src="index.js"></script> | |
</body> | |
</html> |
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 pov = url.match(/,([0-9.]+)y,([0-9.]+)h,([0-9.]+)t/); | |
if (id){ | |
if (id[0] == '-') { | |
id ='F:' + id; | |
} | |
$panoID.innerText = id; | |
panorama.setPano(id); | |
if (pov) { | |
const heading = Number(pov[2]); | |
const pitch = Number(pov[3]); | |
panorama.setPov({ | |
heading, | |
pitch: pitch - 90 | |
}); | |
$panoID.innerText += `\nheading: ${heading}, pitch: ${pitch}`; | |
} | |
} else { | |
panorama.setPano(null) | |
$panoID.innerText = 'No Pano ID found'; | |
} | |
} | |
$url.addEventListener('input', processURL); | |
processURL(); |
#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%; | |
} |