Skip to content

Instantly share code, notes, and snippets.

@aemkei aemkei/README.md
Last active Jun 26, 2019

Embed
What would you like to do?
Google Maps URL Pano ID Extractor

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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.