I am trying to embed the latest Google Street View of the International Space Station to a new page that I am creating. The problem is that I get a black screen and the message "Image may be subject to copyright". I am not an expert of coding (far from it) and I am not sure how to proceed. If anyone has an idea, you are welcome. Thank you.
Here is my code and live here: http://jsbin.com/cipiyofesa/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View controls</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 29.5602853, lng: -95.0853914},
pov: {heading: 165, pitch: 0},
addressControl: false,
visible: true,
linksControl: false,
panControl: false,
enableCloseButton: false,
zoomControl: false,
fullscreenControl: false,
motionTrackingControl: false,
clickToGo: false,
disableDefaultUI: true,
scrollwheel: false,
linkscontrol: false,
pancontrol: true
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initPano" allowfullscreen
frameborder="0" style="border:0">
</script>
</body>
</html>
I did an Geocoding API search using your coordinates and I got the following address
4th St, Houston, TX 77058, USA
This the NASA JSC building 7, it's a government research center so google has no panoramic data on it through it's Maps APIs on purpose.
Furthermore if you were to make a Search View Image API search using your location in the jsfiddle or the address you get no results.
https://maps.googleapis.com/maps/api/geocode/json?address=4th%20St%2C%20Houston%2C%20TX%2077058%2C%20USA&key=YOUR_KEY