Differences between Google Street View API pano parameters (Javascript vs HTTP)

Question

I am working on a computer vision project and I did a javascript program (using the JS Google Street View API) to annotate objects in Google Street View images.

My issue is the following:

When I use the Google Street View HTTP API to retrieve the images that I have annotated with my javascript program, even when I use the same exact parameters to fetch the street view, the images returned are not exactly the same.

As an example is better than a long explanation, does anyone has an idea why the 2 different APIs give different images for the same parameters ?

(panoId="cBMoF9_AqIlK81fFNelY3g",
heading=258.7435095128366,
pitch=-3.895758339008495,
size=600x600 e.g.)

I get this image with the HTTP Google Street View API

and this other one with the JS Google Street View API

I firstly thought that it was because of the difference of the zoom/fov attribute but as this post confirms it, zoom=3 is equivalent to fov=22.5 (cf my example). Moreover, I test with the default values (zoom=1 / fov=90) and the images are neither exactly the same.

For more details, I have copied a part of my javascript code in the snippet below that can be compared with the HTTP API link. (Don't forget to change YOUR_API_KEY !!!)

HTTP API:

https://maps.googleapis.com/maps/api/streetview?size=600x600&pano=cBMoF9_AqIlK81fFNelY3g&heading=259.61209261440393&pitch=-2.9417641281063715&fov=22.5

Javacript API:

function initialize() {

  // Set up the map.
  map = new google.maps.Map(document.getElementById('map'), {
    center: {"lat": 48.84981719, "lng": 2.29300828},
    zoom: 16
  });

  var marker = new google.maps.Marker({
    position: {"lat": 48.84981719, "lng": 2.29300828},
    map: map,
    title: "test",
    draggable: true
  });

  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      // position: params.center,
      pano: "cBMoF9_AqIlK81fFNelY3g",
      pov: {
        heading: 258.7435095128366,
        pitch: -3.895758339008495
      },
      zoom: 3,
      mode: "html5"
    });
  map.setStreetView(panorama);

}

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

#map, #pano {
  float: left;
  height: 600px;
  width: 600px;
  position: relative;
  z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
<div id="pano"></div>
<script async defer type="text/javascript">
  var apiKey = "YOUR_API_KEY";
  var googleURL = 'https://maps.googleapis.com/maps/api/js?key=' + apiKey + "&callback=initialize";
  $.getScript(googleURL)
</script>

user6765044 user6765044 · Accepted Answer · 2017-11-10T14:15:01

I have run into related problems, and I'm coming to the conclusion that the coordinates given by the Street View Metadata API are incorrect (randomly perturbed?).

For example, there is a pair of adjacent panoramas as follows.

The Metadata API gives the coordinates [lat,lon] as: [ 14.43644554, 99.87141436], [ 14.4365385, 99.8714599 ]. Calculated displacement: 4.904 meters east, 10.337 meters north. Calculated separation: 11.441 meters. Caclulated heading 25.38 degrees.

In the browser (HTTP API) they are shown as: [ 14.4364125, 99.8713909], [ 14.4364907, 99.8714431]. Calculated displacement: 5.621 meters east, 8.695 meters north. Calculated separation: 10.354 meters. Calculated heading 32.88 degrees.

Really big differences!

(In this example the HTTP API presents the same panorama as the Python imagery API if the coordinates from the Metadata API are supplied to the HTTP API, but I also have seen examples like the one given by the OP, where a different panorama is returned.)

I'm really eager to hear from anyone who can shed more light on this.

Differences between Google Street View API pano parameters (Javascript vs HTTP)

HTTP API:

Javacript API:

1 Answers