Google Street View JS gives me a view of the side of the house instead of the front

Question

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.

When the house is on a corner, it will sometimes show me the side of the house instead of the front of the house. If I go directly to Google Maps and search for that address, the Street View it shows is actually the front of the house, so I know there must be a way to determine the right view to use.

How do I get my code to show the front of the house like it does on Google's site?

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");
});

https://jsfiddle.net/kennywyland/xm59cbac/

Answer 1

You are setting the pano to the wrong position. You want it in front of the house (snap to road, use the directions service), but point it at the result of the geocoder.

updated fiddle

function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {

    var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
    var service = new google.maps.StreetViewService();
    service.getPanoramaByLocation(panoLatLng, 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);
        document.getElementById('angle').innerHTML = angle;
        var panoOptions = {
            position: panoLatLng,
            pov: {
                heading: angle,
                pitch: 0,
                zoom: 1
            },
            enableCloseButton: false,
            visible: true
        };

        panorama.setOptions(panoOptions);
    });

    var myOptions = {
        zoom: 16,
        center: addLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: 'transparent',
        streetViewControl: false,
        keyboardShortcuts: false
    };
    var map = new google.maps.Map(document.getElementById(map_id), myOptions);
}

function load_map_and_street_view_from_address(address) {
  // Check if GPS has been locally cached.
  var geocoder = new google.maps.Geocoder();
  var directionsService = new google.maps.DirectionsService();
  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');

      var request = {
        origin: address,
        destination: address,
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          var cameraLatLng = response.routes[0].legs[0].steps[0].start_location;
          create_map_and_streetview(gps, cameraLatLng, 'map_canvas', 'pano');
        }
      });
    }
  });
}

function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {

  var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
  var service = new google.maps.StreetViewService();
  service.getPanoramaByLocation(panoLatLng, 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 marker = new google.maps.Marker({
      map: map,
      icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
      position: panoData.location.latLng
    });
    var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
    document.getElementById('angle').innerHTML = angle;
    var panoOptions = {
      position: panoLatLng,
      pov: {
        heading: angle,
        pitch: 0,
        zoom: 1
      },
      enableCloseButton: false,
      visible: true
    };

    panorama.setOptions(panoOptions);
  });

  var myOptions = {
    zoom: 16,
    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,
    icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
    position: addLatLng
  });
}

$(document).ready(function() {
  console.log('ready');
  load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA 91762");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="angle"></div>
<div id="map_canvas" style="width: 400px; height: 400px; border: 1px solid orange; display: inline-block;"></div>
<div id="pano" style="width: 400px; height: 400px; border: 1px solid green; display: inline-block;"></div>