How do I initialize Dynamic Street View to look at the front of a building?

Initializing the Street View panorama viewer to look at the front of a building can be deceptively difficult, because the Street View viewer is initialized with a lat/lng location, not an address.

Simply geocoding the address of a building and initializing Street View with that lat/lng location will not necessarily show you a panorama with a view of the front of that building. The viewer's behavior is to pick the panorama with the closest distance to the lat/lng location you specify. In some cases, the closest panorama may not have been captured in front of the building (e.g. around the corner, on a street behind the property, etc.). So you may be looking at the side or back of the building you want to see.

To ensure that the panorama used by the Street View viewer can see the front of a building, you have to leverage Street View Metadata API. Metadata API can determine the best panorama for to view an address, not just a lat/lng coordinate. Similar to how Street View Static API works, when the location parameter in a request is an address string, the panorama returned will have the best view of the front of that building, rather that simply the closest distance.

The general approach is:

• Geocode the building's address
  
  • Ensure you received a rooftop-accurate result
• Query StreetView Metadata API for the best panorama for the address
  • Metadata API requests are free
• Call StreetViewService.getPanorama() with the panoId returned from Metadata API
• Use Geometry Library to calculate the heading between the panorama's location (i.e. where the camera was when the image was captured) and the geocoded lat/lng
• Initialize the Street View viewer with the panorama returned by StreetViewService and the computed heading (see code below) 

// lat/lng from geocoding api
var geocode = new google.maps.LatLng(32.6751211, -96.8427423);
// panoId from metadata service
var panoId = 'MAC7s5uf1Uxr48qIvhTwgw';

var viewer = new google.maps.StreetViewPanorama(document.getElementById('street-view'));			
var sv = new google.maps.StreetViewService();

sv.getPanorama({ pano: 'MAC7s5uf1Uxr48qIvhTwgw' }, function (data, status) {
  if (status === 'OK') {		
    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, geocode);

    viewer.setPano(data.location.pano);
    viewer.setPov({
      heading: heading,
      pitch: 0
    });
  }
});