title: Google Street View JS gives me a view of the side of the house instead of the front
body: <p>Using examples from Google's samples and other code found here on Stack Overflow, I've put together some JS that takes a street address and displays an overhead map as well as a Street View. For the most part these work wonderfully, but it breaks when the house is on a corner.</p>
  
  <p>When the house is on a corner, it will sometimes show me the side of the house instead of the front of the house. <a href="https://www.google.com/maps/@34.03472,-117.658957,3a,75y,90.5h,90t/data=!3m4!1e1!3m2!1snXCaq68FslqN3sZL_EiGEg!2e0" rel="nofollow">If I go directly to Google Maps and search for that address, the Street View it shows is actually the front of the house</a>, so I know there must be a way to determine the right view to use.</p>
  
  <p>How do I get my code to show the front of the house like it does on Google's site?</p>
  
  <pre><code>function load_map_and_street_view_from_address(address) {
      // Check if GPS has been locally cached.
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode( { 'address': address }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
  
              var gps = results[0].geometry.location;
              create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
          }
      });
  }
  
  function  create_map_and_streetview(lat, lng, map_id, street_view_id) {
  
      var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
      var addLatLng = new google.maps.LatLng(lat,lng);
      var service = new google.maps.StreetViewService();
      service.getPanoramaByLocation(addLatLng, 50, function(panoData, status) {
          if (status != google.maps.StreetViewStatus.OK) {
              $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
              return;
          }
          var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
  
          var panoOptions = {
              position: addLatLng,
              addressControl: false,
              linksControl: false,
              panControl: false,
              zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
              },
              pov: {
                  heading: angle,
                  pitch: 0,
                  zoom: 1
              },
              enableCloseButton: false,
              visible:true
          };
  
          panorama.setOptions(panoOptions);
      });
  
      var myOptions = {
          zoom: 14,
          center: addLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          backgroundColor: 'transparent',
          streetViewControl: false,
          keyboardShortcuts: false
      };
      var map = new google.maps.Map(document.getElementById(map_id), myOptions);
      var marker = new google.maps.Marker({
          map:map,
          animation: google.maps.Animation.DROP,
          position: addLatLng
      });
  }
  
  $(document).ready(function() {
      console.log('ready');
      load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kennywyland/xm59cbac/" rel="nofollow">https://jsfiddle.net/kennywyland/xm59cbac/</a></p>