Search code examples
javascriptgoogle-maps360-panorama

view panoramic image on google map

       function initPano() {
        // Set up Street View and initially set it visible. Register the
        // custom panorama provider function. Set the StreetView to display
        // the custom panorama 'reception' which we check for below.
        var panorama = new google.maps.StreetViewPanorama(
          document.getElementById('map'), {
            pano: 'reception',
            visible: true,
            panoProvider: getCustomPanorama
        });
      }

      // Return a pano image given the panoID.
      function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
        // Note: robust custom panorama methods would require tiled pano data.
        // Here we're just using a single tile, set to the tile size and equal
        // to the pano "world" size.
        return 'http://bestofdiscus.gr/portals/0/Discus-Header-WR.jpg';
      }






  function getCustomPanorama(pano, zoom, tileX, tileY) {
        if (pano === 'reception') {
          return {
            location: {
              pano: 'reception',
              description: 'Google Sydney - Reception'
            },
            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(1024, 512),
              worldSize: new google.maps.Size(1024, 512),
              centerHeading: 105,
              getTileUrl: getCustomPanoramaTileUrl
            }
          };
        }
      }

In this block of code, i don't understand the parameters :pano, zoom, tileX, tileY in the function getCustomPanoramaTileUrl. I understand that, without using these parameter, the function will return an url of image.

my question is: 1/What do these parameters use for and how to use it ? 2/What is a pano ID (i have been searching for it a lot but still can not understand)

Solution

  • Your code, where does it come from?

    After doing some digging and some research I was able to find that your code is actually a piece of code from the Google Documentation, Custom Street View panoramas.

    With this in mind Google has some documentation on the matter that will help you understand what is going on with your code:

    I read the documentation, but I still don't get it!

    Although Google talks about Custom Panoramas with multiple views, the example provided is too simple to illustrate the full potential of the resources Google provides you.

    Now, regarding your specific question...

    What are pano, zoom, tileX, tileY used for?

    In the code example that you provided, they are used for... nothing. You could literally remove them from getCustomPanoramaTileUrl and the code would still work.

    So, what are they used for? Well, according to the References Documentation for StreetView, these parameters have the following objective:

    Gets the tile image URL for the specified tile. pano is the panorama ID of the Street View tile. tileZoom is the zoom level of the tile. tileX is the x-coordinate of the tile. tileY is the y-coordinate of the tile. Returns the URL for the tile image.

    Now, if this is still, confusing, I will try to explain.

    Custom panoramas are sets of images, put together, like in the image bellow:

    panorama_img

    When using a real panoramic view, you want to pass a set of images, and the StreetView object needs to know which set of images you are referring to (panoId), at which zoom level (zoom) and inside the set, the X and Y positions of the image you are currently seeing (tileX and tileY).

    In the example you provided, since it is extremely simple, none of this is used because you always return the same image no matter what. But in a more complex example, that uses a set of images, this information would be crucial to let the StreetView know where you are looking at in order to display the correct image.