How to get a specific photosphere? - google-maps-api-3

Question

With the latest changes to Google Maps, the UI for getting a HTML snippet for embedding a photosphere into another web page has gone missing.
So, given a photosphere such as the one that can be found here, how can I embed it on a webpage using Google Maps API?
I tried two approaches:
With the approach described at https://developers.google.com/photo-sphere/web/ I wasn't able to find the panoid in the URL. I tried other random pieces of the URL to see if it would work, but it didn't.
With the approach described at https://developers.google.com/maps/documentation/javascript/examples/streetview-simple I specified the coordinates of the aforementioned photosphere, but the service returns a photosphere which is not the one I want. I want the one I authored myself.

Answer 1

At First:
the custom panoramas will not be published immediately, it will take some time until they will be available via the API
Your 2nd approach works for me, maybe the accuracy wasn't sufficient.
When I go to your google+-profile the location will be -23.55, -46.631, which will return a different panorama. But when I click on the map in the photo-details I get a more precise result in the page that will be opened:
-23.550201666666666,-46.63147500000002
When I use this location I get the desired panorama, the panoid is
PB0KYqVf9S0AAAQY__M_XQ
function init() {
var goo = google.maps,
map = new goo.Map(document.getElementById('map'), {
center : {lat: -23.5502017, lng: -46.631475},
zoom : 14,
noClear : true,
disableDefaultUI : true,
streetViewControl : true
}),
form = map.getDiv().querySelector('form'),
input = document.getElementById('latlng'),
desc = document.getElementById('desc'),
pano = document.getElementById('pano'),
pid = document.getElementById('pid'),
sv = new google.maps.StreetViewService();
map.setStreetView(new goo.StreetViewPanorama(pano,{
disableDefaultUI:true
}));
input.value=map.getCenter().toUrlValue();
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM]
.push(form);
map.controls[google.maps.ControlPosition.TOP_LEFT]
.push(pano);
map.controls[google.maps.ControlPosition.TOP_CENTER]
.push(desc);
google.maps.event.addListener(map,'get_pano',function(e){
sv.getPanorama({location: e.latlng, radius: 50}, function(data,status){
map.getDiv().className=status;
if (status === goo.StreetViewStatus.OK) {
map.getStreetView().setPano(data.location.pano);
pid.value=data.location.pano;
desc.innerHTML=data.location.description;
}
else{
desc.innerHTML='no streetview available';
pid.value='';
}
google.maps.event.trigger(map,'resize');
});
});
google.maps.event.addListener(map,'click',function(e){
input.value=e.latLng.toUrlValue();
google.maps.event.trigger(form,'submit');
});
google.maps.event.addDomListener(form,'submit',function(e){
if(e)e.preventDefault();
var ll=input.value.split(','),
r=[85,180],p=['lat','lng'],f,latlng={},err=false;
if(ll.length===2){
for(var i=0;i<ll.length;++i){
f=parseFloat(ll[i]);
if(Math.abs(f)<=r[i]){
latlng[p[i]]=f;
}
else{
err=true;
}
}
}
else{
err=true;
}
if(err){
alert('invalid coordinates')
}
else{
google.maps.event.trigger(map,'get_pano',{latlng:latlng})
}
return false;
});
google.maps.event.trigger(form,'submit');
}
html, body,#map {
height: 100%;
margin: 0;
padding: 0;
}
#pano{
height:100px;
width:150px;
}
#pid,#pano{
display:none;
}
#map>form{
display:none;
}
#pid{
background:Chartreuse;
}
#map.OK #pid,#map.OK #pano,#map.OK #desc{
display:block;
}
#desc{
background:tomato !important;
}
#map.OK #desc{
background:rgba(0,255,0, .8) !important;
}
#map form,#desc{
text-align:center;
padding:6px;
background:rgba(255,255,255, .8);
border:1px solid #000;
border-radius:4px;
}
#desc{
background:rgba(255,0,0, .8);
}
#map form,#pano{
margin:4px;
}
<div id="map">
<form>
<input id="latlng" placeholder="latitude,longitude"><br/><input type="submit"><br/>
<input id="pid" readonly>
<div id="pano"></div>
<div id="desc"></div>
</form>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&callback=init">
</script>