Why are some street-view images from the wrong angle?

Question

I am using the Google Street View Image API to display an image of an address. Although most of the images are amazingly accurate, I've noticed a few that are from the wrong angle like a house on the corner where the image is from the side street, not from the front street. When I check Google Maps the image that shows on the top of the left panel is correct.

Example; Below is an image using the URL parameters from the API instructions; http://maps.googleapis.com/maps/api/streetview?size=300x200&location=39.408751,-104.917738&sensor=false

Below is an image of the same location that displays in the left panel of Google Maps,

https://cbks0.google.com/cbk?output=thumbnail&cb_client=maps_sv&thumb=2&thumbfov=60&ll=39.408554,-104.917506&yaw=317.7&thumbpegman=1&w=300&h=118

Is there a way to get the "better" angle using the API?

Answer 1

I have been noticing that too, google seems to be using a different algorithm to display that image (in the left panel) on its site and it is more accurate as it is at the front shot of the location.

There is no direct way to get that angle with their "Street View Image API" but you can use the javascript API to calculate that angle and pass it on to the Image API.

The question here is how can we know which is front of the building?, well the front is usually where the entrance is from the street. So, you can use the DirectionService to get the nearest transportation start location which is usually the road at the entrance of the building, using this location you can now easily compute the heading using their geometry utility methods and pass this on to your Image API.

Answer 2

If you know the address, and a ROOFTOP geocoder result is available, you can find the closest location on the road, then use that to request the streetview:

http://www.geocodezip.com/v3_Streetview_lookAtB.html?snaptoroad=5175%20Buena%20Vista%20Boulevard,%20Castle%20Rock,%20CO%2080109,%20USA

(if you don't know the address, you can reverse geocode the location to get it like I did here)

working example from this question: Using google street view with a marker, how do I point the POV at a marker?

Working fiddle

working code snippet:

var geocoder = new google.maps.Geocoder();
var myStreetView = null;
var marker = null;

function geocodeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    //alert (results);
    if (status == google.maps.GeocoderStatus.OK) {
      //alert(results[0].geometry.location);
      myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"));
      myStreetView.setPosition(results[0].geometry.location);
      google.maps.event.addListenerOnce(myStreetView, 'status_changed', function() {
        var SVstatus = myStreetView.getStatus()
        document.getElementById('info').innerHTML = "Street View Status="+SVstatus;
        var heading = google.maps.geometry.spherical.computeHeading(myStreetView.getLocation().latLng, results[0].geometry.location);
        myStreetView.setPov({
          heading: heading,
          pitch: 0
        });
        setTimeout(function() {
          marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: myStreetView,
            title: address
          });
          if (marker && marker.setMap) marker.setMap(myStreetView);
        }, 500);
      });

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  google.maps.event.addDomListener(document.getElementById('geoBtn'), 'click', geocodeAddress);
}
google.maps.event.addDomListener(window, 'load', geocodeAddress);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<input id="address" type="text" value="5175 Buena Vista Boulevard, Castle Rock, CO 80109, USA" />
<input id="geoBtn" type="button" value="Go" />
<div id="info"></div>
<div id="map_canvas"></div>