4
\$\begingroup\$

I have a 360° panoramic photo, 18432×9216 px in size, stitched with ICE. I have uploaded the panorama to Photosynth, so that it can be viewed and navigated conveniently. However, Photosynth requires the Silverlight plugin, which some don't have installed. As an alternative, I would like to convert the panorama into a custom Google Streetview panorama.

What is the simplest way to create a custom Google Streetview panorama?

Note: I only want to share the panorama with friends, possibly via a link. I do not want the panorama to be freely discoverable on the web.

Improve this question
\$\endgroup\$
7
  • 1
    \$\begingroup\$ This might help some - Build your own Street View with Google Street View API. Are you stuck on a specific step of the process? The link you already provided has quite a bit of detail. \$\endgroup\$
    – dpollitt
    Commented Apr 28, 2013 at 20:44
  • \$\begingroup\$ @dpollitt Following the process should be no problem for me (I'm a developer). However, I'd prefer a simple end-user friendly solution, with as little manual steps as possible. Anyhow, thanks for the link! \$\endgroup\$
    – feklee
    Commented Apr 28, 2013 at 21:20
  • \$\begingroup\$ @feklee I'm not sure that google lets you use your own photos for panos. Nothing in the API says that, it's more like how you can take Google Street View data and assemble them on your own. \$\endgroup\$
    – Peng Tuck Kwok
    Commented May 1, 2013 at 3:29
  • 2
    \$\begingroup\$ I reccomend checking out this link as well in case you haven't seen it: labs.teehanlax.com/project/hyperlapse Not directly related but still relevant i think \$\endgroup\$
    – NULLZ
    Commented May 6, 2013 at 15:12
  • 1
    \$\begingroup\$ Interestingly Photosynth does work without Silverlight, although for some reason you have to fettle the user-agent string in the browser to tell the server it's a phone and to serve up HTML5 instead. \$\endgroup\$
    – James Snell
    Commented Aug 4, 2013 at 11:38

3 Answers 3

Reset to default
3
\$\begingroup\$

360cities: panoramas can be viewed on desktop, iPhone, iPad and in Google Earth.

If you want a more customized panorama or virtual tour (many panoramas connected), krpano would be the best option.

UPDATE:

Google Maps has a repo on GitHub that can convert Android's Sphere Images to Street View: https://github.com/googlemaps/streetsphere and it also has an online generator: http://street-sphere.appspot.com/

But it only works with Android's Sphere Images which contains metadata. You can try to generate one with this image. The output zip file contains that image and a web page.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Thanks! Those are interesting alternatives, though that doesn't answer my question. \$\endgroup\$
    – feklee
    Commented May 1, 2013 at 12:21
  • \$\begingroup\$ Thanks for pointing to the converter from Android Photo Sphere to Google Maps API Custom Street View. I have found that before, but it's not appropriate for me, as I have generated the panorama by other means. \$\endgroup\$
    – feklee
    Commented May 6, 2013 at 0:31
3
\$\begingroup\$

I realized that GraphicsMagick offers a simple way to prepare images for Streetview. The software runs on a large number of operating systems. An alternative is ImageMagick.

Tutorial based on Maps Javascript API V3

Example prerequisite

Panorama image my_panorama.jpg, sized 18432×9216 px (360° horizontally, 180° vertically), stitched with ICE.

Example definitions

  • Tile size: 1152×576 px

  • Naming structure for tile files:

    tile_Z_N.jpg

    Where:

    • Z, zoom level: from 0 to 4

    • N, tile number: y * (2^Z) + x

Creation of tiles

Unix command line (on Windows/DOS, replace cp by copy):

cp my_panorama.jpg tile_0_0.jpg
gm convert panorama.jpg -crop 9216x4608 tile_1_%d.jpg
gm convert panorama.jpg -crop 4608x2304 tile_2_%d.jpg
gm convert panorama.jpg -crop 2304x1152 tile_3_%d.jpg
gm convert panorama.jpg -crop 1152x576 tile_4_%d.jpg
gm mogrify -size 1152x576 -resize 1152x576 +profile "tile_*_*.jpg"

Tool for displaying panorama with Streetview

Just copy&paste this code. To view the panorama with Google Streetview, simply open the file index.html (see below) in a modern web browser.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My panorama</title>
    <meta charset="utf-8">
    <link href="index.css" rel="stylesheet">
    <script
       src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false">
    </script>
    <script src="index.js"></script>
  </head>
  <body>
    <div id="panorama"></div>
  </body>
</html>

index.css:

html, body, #panorama {
    height: 100%;
    margin: 0;
    padding: 0;
}

index.js:

function initialize() {
    var panoOptions = {
        pano: 'myPanorama',
        visible: true,
        panoProvider: getCustomPanorama
    };

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('panorama'), panoOptions);
}

function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
    var n = tileY * Math.pow(2, zoom) + tileX;

    return 'tile_' + zoom + '_' + n + '.jpg';
}

function getCustomPanorama(pano, zoom, tileX, tileY) {
    if (pano === 'myPanorama') {
        return {
            tiles: {
                tileSize: new google.maps.Size(1152, 576),
                worldSize: new google.maps.Size(18432, 9216),
                centerHeading: 105,
                getTileUrl: getCustomPanoramaTileUrl
            }
        };
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

Further reading

Google's tutorial "Providing Custom StreetView Panoramas"

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Not really what most would call simple, I presume. Therefore I don't mark my own answer as accepted for now, although it does show a straight forward solution to the problem. \$\endgroup\$
    – feklee
    Commented May 7, 2013 at 21:57
  • \$\begingroup\$ I think you forgot to add the +adjoin command in the GraphicsMagick code snippet? \$\endgroup\$
    – user45840
    Commented Oct 23, 2015 at 10:27
1
\$\begingroup\$

I found the tutorial How to upload non-android 360 panoramas to Google Maps and successfully uploaded a spherical panorama into Google+. I haven't took the step to publish it on Google Maps, but I guess for private sharing, G+ is better.

Note the spherical icon on the thumbnail.

Basically, we have to:

  • turn on the option "Upload my photos at full size" on G+ Settings.

  • add metadata to the photo, either:

    1. using the tool photo-sphere.appspot.com

    2. adding the EXIF manually (adjusting the pixels and the GPS data):

      ProjectionType=equirectangular
UsePanoramaViewer=True
CroppedAreaImageWidthPixels=6000
CroppedAreaImageHeightPixels=3000
FullPanoWidthPixels=6000
FullPanoHeightPixels=3000
CroppedAreaLeftPixels=0
CroppedAreaTopPixels=0
PoseHeadingDegrees=0.0
InitialViewHeadingDegrees=0
InitialViewPitchDegrees=0
InitialViewRollDegrees=0
InitialHorizontalFOVDegrees=90.0
Improve this answer
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Haven't tried it yet, but that looks very interesting! \$\endgroup\$
    – feklee
    Commented Aug 15, 2014 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.