I have a Street View-map of my campus area. I can navigate around the areas with the links created with getCustomLinks fine. But I have been stuck with this for a while now: is there a way to change between custom street view panoramas via a select component? I want to be able to navigate around the campus area with the arrows, but also to be able to jump to any panorama in the select-component. The arrows work perfectly. So far I have managed to change the panoramas
My select-box
<select onChange="onChange()" id="hamk_select" width="1000px">
<option value="b_talo_piha">HAMK Visamäki</option>
<option value="kirjasto">Kirjasto</option>
<option value="c_talo_auditorio">Auditorio</option>
</select>
onChange()-function
function test(){
d = document.getElementById("hamk_select").value;
var panoOptions = {
pano: d,
visible: true,
panoProvider: getCustomPanorama,
scrollwheel: true,
enableCloseButton: false,
centerHeading: 270,
disableDoubleClickZoom: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
pov: {
heading: 130,
pitch: 0
},
clickToGo: false,
imageDateControl: false,
panControl: false
};
panorama = new google.maps.StreetViewPanorama(document.getElementById('map_canvas'),panoOptions);
Now I am stuck with creating the correct links. In the initialization method, similar to the example at the documentation a eventListener is added to the 'links_changed' event and 'result.location.pano' is used to create links.
streetviewService = new google.maps.StreetViewService();
var radius = 50;
streetviewService.getPanoramaByLocation(THE_ENTRY_LOCATION, radius,
function(result, status) {
if (status == google.maps.StreetViewStatus.OK) {
google.maps.event.addListener(panorama, 'links_changed',
function() {
createCustomLinks(result.location.pano);
});
}
});
I think I should use get StreetViewService's getPanoramaById-method instead of getPanoramaByLocation. I have tried this but the GET fails (status = UNKNOWN_ERROR, JavaScript console says: 404 Not Found in the header, so obviously something isn't working.)
streetviewService.getPanoramaById(panorama.getPano(),
function(result, status) {
if (status == google.maps.StreetViewStatus.OK) {
createCustomLinks(result.location.pano);
}
});
Calling just createCustomLinks(d) doesn't help either, as var links is not defined. Any ideas how to correctly do this?
Solution was ridiculously simple: only change the pano value and use that as the panorama.setOptions value to trigged the original "links_changed" event.
function onChange(){
d = document.getElementById("hamk_select").value;
var panoOptions =
{
pano: d,
};
panorama.setOptions(panoOptions);
}