Getting north from raw panorama in Google Street View

Asked 30/11, 2016 at 21:26 Answered 19/1, 2017 at 21:18

Solved javascript google-maps google-street-view

I am using the Street View Javascript Api in a project, and I understand how to use heading to make the Google's panorama aim north.

Now I am also getting all the tiles that create this panorama and using them to create a 360° raw panorama image.

However, I want to know if there is a way to find out automatically where the north is in the raw panorama created.

For example,

Capparidaceous answered 30/11, 2016 at 21:26 Comment(2)

How do you create the raw panorama ? and how are you getting the tile list ? – Dalenedalenna 16/1, 2017 at 18:13

I am downloading all tiles for a pano_id, and stitching them using Python. Similar to this – Capparidaceous 16/1, 2017 at 18:19

I managed to solve it in a way.

In my project I am using StreetViewService to get a Panorama from a pair Latitude-Longitude

sv = new google.maps.StreetViewService();
sv.getPanorama({location: latLng, radius: 50}, updateInfo)

In the parameters for updateInfo (info, status) which are the response from sv.getPanorama i found:

info.tiles.centerHeading

This is the car's direction heading.

Now, if the raw panorama is a 360° view, I can use cross multiplication to get the pixel in the horizontal where the North is and draw all cardinal points correctly.

This was more complicated than i would want, but at least is working now.

Capparidaceous answered 19/1, 2017 at 21:18 Comment(0)

Is there a direct solution?

As far as I know, Google Maps APIs and in special the panorama views do not have an interface that has arrows in the North and/or South of the image like you have in your post.

Such a solution would have to be manually coded by you into figuring it out.

Work-around

However, there is a workaround you can use, which makes use of the panorama view and that has a built-in compass in the interface. This way, when you move the image around, you always have a sense where North and South are.

image_example

Code and Docs

You can achieve this type of interface by using the following example (PS: replace the API key!):

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View panoramas</title>
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      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 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
      }

      // Construct the appropriate StreetViewPanoramaData given
      // the passed pano IDs.
      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),
              // The heading in degrees at the origin of the panorama
              // tile set.
              centerHeading: 105,
              getTileUrl: getCustomPanoramaTileUrl
            }
          };
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano">
    </script>
  </body>
</html>

Which is available at the Custom Street View panoramas documentation page.

Googins answered 16/1, 2017 at 16:3 Comment(0)