Как получить конкретную фотосферу?

Question

С последними изменениями в Картах Google пользовательский интерфейс для получения фрагмента HTML для встраивания фотосферы в другую веб-страницу пропал.

Итак, учитывая фотосферу, такую ​​как та, которая находится, можно найти here, как я могу встроить ее на веб-страницу с помощью API Карт Google?

Я попробовал два подхода:

1. С подходом, описанным в https://developers.google.com/photo-sphere/web/ я не смог найти panoid в URL. Я попробовал другие случайные фрагменты URL-адреса, чтобы увидеть, будет ли это работать, но это не так.

2. С подходом, описанным в https://developers.google.com/maps/documentation/javascript/examples/streetview-simple, я указал координаты вышеупомянутой фотосферы, но служба возвращает фотосферу, которая не является той, которую я хочу. Я хочу тот, который я сам создал.

Answer 1

В первом: пользовательских панорамах не будут опубликовано сразу же, это займет некоторое время, пока они не будут доступны через API

Вашего второй подход работает для меня, может быть, точности не была достаточно. Когда я перейду в ваш google + -profile, будет -23.55, -46.631, который вернет другую панораму. Но когда я нажимаю на карте в фото-детали я получить более точный результат на странице, которая будет открыта:

-23.550201666666666,-46.63147500000002 

Когда я использую это место, я получаю нужную панораму, то panoid является

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>