Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Maps Street-View point attribute viewer
<!DOCTYPE html>
<!--
this little handy dandy applet was adapted by code from Soldeplata Saketos #win
https://stackoverflow.com/questions/29916149/google-maps-streetview-how-to-get-panorama-id
-->
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
height: 95%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 95%;
width: 45%;
}
</style>
</head>
<body>
<div id="tray">
<button id="doer" onclick="doThings()">do it</button>
<span id="resulting"></span>
</div>
<div id="map"></div>
<div id="pano"></div>
<script>
var panorama, map;
var APIkey= "YOUR_API_KEY"
function initialize() {
var fenway = {
lat: 42.345573,
lng: -71.098326
};
var agbar = new google.maps.LatLng(41.4035482, 2.1894355);
map = new google.maps.Map(document.getElementById('map'), {
center: agbar,
zoom: 14
});
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: agbar,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
function doThings() {
console.log("doing things");
document.getElementById("resulting").innerHTML = "https://maps.googleapis.com/maps/api/streetview?size=640x640" +"&pano=" + panorama.getPano() + "&heading=" + panorama.getPov().heading + "&pitch=" + panorama.getPov().pitch + "&fov="+ (180/ (Math.pow(2, panorama.getZoom()?panorama.getZoom():1)))+ "&key=" + APIkey;
//use the next line to open in a new tab the resulting image at max size (640x640)
window.open("https://maps.googleapis.com/maps/api/streetview?size=640x640" + "&pano=" + panorama.getPano() + "&heading=" + panorama.getPov().heading + "&pitch=" + panorama.getPov().pitch + "&fov="+ (180/ (Math.pow(2, panorama.getZoom())))+ "&key=" +APIkey)
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>
</body>
</html>
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.