javascript - Request main road / curbside StreetView panoramas instead of back alleys from API

Question

Is there a way to request main road Google StreetView panorama data instead of back alley panorama data for a given location (latitude/longitude)?

I'm using the Google Maps Javascript API to retrieve a street view panorama from a home address supplied by our users. It works quite well for most addresses I've tried, but I'm noticing a lot of properties in California also have street views for back alleys, and the API seams to be consistently returning the back alley panorama instead of the main road (front of property) panorama.

I don't want to show the user a back alley panorama of their home, but instead the main road panorama. If I lookup the same address on maps.google.com I see the front of the house, but when I request the same address through the API I get the back alley.

The process I'm currently using is:

1. Geocode address
2. Get panorama given the geocode location (lat/long)
3. Compute heading and display panorama on page

Test Addresses:

1. 325 S Peck Dr, Beverly Hills, CA, USA, 90212
2. 333 S Rodeo Dr, Beverly Hills, CA, USA, 90212

Any ideas or suggestions would be greatly appreciated. Thanks!

Answer 1

Use the directions service to get directions from the desired address to itself. Use that location instead of the geocoder result for the street view location. Use the geocoder result (hopefully a ROOFTOP accuracy result) for the place to look "at".

related question: Facing the targeted building with Google StreetView Examples:

• 325 S Peck Dr, Beverly Hills, CA, USA, 90212
• 333 S Rodeo Dr, Beverly Hills, CA, USA, 90212

code snippet:

var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address = "333 S Rodeo Dr, Beverly Hills, CA, USA, 90212";
var myLatLng;

function initialize() {

  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      myLatLng = results[0].geometry.location;

      // find a Streetview location on the road
      var request = {
        origin: address,
        destination: address,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, directionsCallback);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {

    panorama.setPano(data.location.pano);

    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
    panorama.setPov({
      heading: heading,
      pitch: 0,
      zoom: 1
    });
    panorama.setVisible(true);

  } else {
    alert("Street View data not found for this location.");
  }
}

function directionsCallback(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var latlng = response.routes[0].legs[0].start_location;
    sv.getPanoramaByLocation(latlng, 50, processSVData);
  } else {
    alert("Directions service not successfull for the following reason:" + status);
  }
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="pano" style="width: 425px; height: 400px;float:left"></div>