Initialize Dynamic Street View to look at the front of a building

Typically, Dynamic Street View is initialized by providing the lat/lng coordinate of a location to look at. Street View then automatically selects the panorama closest to that location and points the viewer toward it.

However, in certain scenarios this may not achieve the desired result. For instance, when a building is located on a corner, the closest panorama may be the side view. In such a case, you can make sure Street View is looking at the front of the building by setting some parameters that will override the default behavior.

To initialize Dynamic Street View so the user is seeing the front of a specific building, you'll need:

• address of the building
• lat/lng coordinate of the address
• panoId and location of the image sphere to open
• heading to orient the camera

Geocode the Address

Use Geocoding API to get the lat/lng coordinate for the building's address.

Find the PanoID

Each Street View panorama has a unique identifier called a panoId. By providing a panoId, you can initialize the Street View viewer in JavaScript API to load that specific image sphere.

To find the best panorama for an address, use the Street View Metadata service. By specifying the address of the building as the location parameter of your requests, the service will return the panorama with the best view of the front of that building. You'll need the panoId and location properties from the response.

Street View Metadata requests are free.

Calculate the Heading

Now that you know the panoId, the last step is to calculate the orientation for the viewer--which way to turn to "look at" the building. In Street View, that is known as heading, the compass angle from the location where the image was captured to the building.

To calculate heading, use the computeHeading() function in JavaScript API's Geometry Library. Use the location of the panorama obtained from the Street View Metadata service as the first parameter and the geocoded lat/lng for the building's address as the second.

 var heading = google.maps.geometry.spherical.computeHeading(panoLocation, geocodeLatLng); 

Putting it All Together

// 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: panoId }, 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
    });
  }
}

References

Geocoding API

Street View Image Metadata

Maps JavaScript API Geometry Library