I need your help, and I will be short.
I've got a Ricoh Theta camera (360 degrees camera). Now I want to add a Custom Street View Panorama to my website. However, the API transforms all the images uploaded from Ricoh Theta incorrectly. The ratio of the images is 3584 x 1792
I've figured out that different browsers display my images differently. Firefox and IE do a relatively good job, but it's still not what Google's panoramas look like.
UPDATE:
This is what I've done so far. I was strictly following the Google's examples from the documentation.
<!DOCTYPE html>
<html>
<head>
<title>16 Dempsey Crescent</title>
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
<script>
var panorama;
// The panorama that will be used as the entry point to the custom
// panorama set.
var entryPanoId = null;
function initialize() {
// The latlng of the entry point to the Google office on the road.
var dempseyCres = new google.maps.LatLng(43.753859,-79.374082);
// Set up the map and enable the Street View control.
var mapOptions = {
center: dempseyCres,
zoom: 16
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
panorama = map.getStreetView();
// Set up Street View and initially set it visible. Register the
// custom panorama provider function.
var panoOptions = {
position: dempseyCres,
visible: true,
panoProvider: getCustomPanorama
};
panorama.setOptions(panoOptions);
// Create a StreetViewService object.
var streetviewService = new google.maps.StreetViewService();
// Compute the nearest panorama to the Google Sydney office
// using the service and store that pano ID.
var radius = 50;
streetviewService.getPanoramaByLocation(dempseyCres, radius,
function(result, status) {
if (status == google.maps.StreetViewStatus.OK) {
// We'll monitor the links_changed event to check if the current
// pano is either a custom pano or our entry pano.
google.maps.event.addListener(panorama, 'links_changed',
function() {
createCustomLinks(result.location.pano);
});
}
});
}
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Return a pano image given the panoID.
/*return 'images/panoReception1024-' + zoom + '-' + tileX + '-' + tileY +
'.jpg';*/
return 'images/R0010029.JPG';
}
function getCustomPanorama(pano) {
switch (pano) {
case 'room-1':
return {
location: {
pano: 'room-1',
description: '16 Dempsey Crescent',
latLng: new google.maps.LatLng(43.753859,-79.374082)
},
links: [],
// The text for the copyright control.
copyright: 'Imagery (c) 2010 Google',
// The definition of the tiles for this panorama.
tiles: {
tileSize: new google.maps.Size(1700, 850),
worldSize: new google.maps.Size(3584, 1792),
// The heading at the origin of the panorama tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl
}
};
break;
default:
return null;
}
}
function createCustomLinks(entryPanoId) {
var links = panorama.getLinks();
var panoId = panorama.getPano();
switch (panoId) {
case entryPanoId:
// Adding a link in the view from the entrance of the building to
// reception.
links.push({
heading: 340,
description: 'Enter The House',
pano: 'room-1'
});
break;
case 'room-1':
// Adding a link in the view from the entrance of the office
// with an arrow pointing at 100 degrees, with a text of 'Exit'
// and loading the street entrance of the building pano on click.
links.push({
heading: 110,
description: 'Back to the Street',
pano: entryPanoId
});
break;
default:
return;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I would really appreciate, if you helped me solving this issue.
Could you try to set your tile options object so that world and tile size are equal? It seems you don't have tiles so much as one big panorama.