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?

Vigue

I think they move all drunks into the garages in this neighborhood. On a technical note, I read that the angle is calculated based on the closest camera measured from the address coordinates to the camera. In this case, the side street must be slightly closer to the geocoordinates of the address. If that's true, how does Google Maps know that the front shot is better? Maybe because it was taken from the street of record? – Vigue

Answer 1

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>

Mobocracy

Your answer is helpful, but Im still at a loss to get the better single image, as opposed to the streetview slider image in your example. I am starting with an address, then I get the geocode from Google. Based on the Google documentation, the returned geocode is a ROOFTOP. It's funny, when I click the link in your answer, I get a split image in the right pane, partly from the side street and partly form the more desirable front street. If I click on it and barely slide the image, it corrects to the front view. – Vigue

Answer 2

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.

Dreamworld

Wow, another very helpful answer but I am lazy and was hoping for an "easy" way to get the better angle from the API, heck the Maps site obviously knows about it! Maps has gotten some major updates lately, maybe they will eventually put the same algorithms in the Street view Image API. – Vigue

They seem to have gone a step backwards in their new google maps, you get the same angle (worse zoom) that you get in the Image API - https://cbks0.google.com/cbk?cb_client=maps_sv.tactile&authuser=0&hl=en&output=thumbnail&thumb=2&panoid=rU9xiEfU3A03ZgXck2k6pA&w=374&h=75&yaw=77.896156&pitch=0&ll=39.40871043542365,-104.91798281738517 – Dreamworld

Wow that's a bummer. I submitted a error report for that address and noted the regression from the old maps app. We'll see if they take note. – Vigue