[SOLVED] Get embedded street view from an address

Get embedded street view from an address

I had a question regarding street view.

I need to have an embedded street view facing the location in question, from it's textual address, without any manual tasks involved.

This is what I do now:

I use the Google Place API to get the longitude and latitude from an address
Using these, I use this API which displays the closest street view node from the address.

This works already, the only issue is the following: It does not face the store/building in question.

Is there an API of some sort that would allow me to do that?

Solution

If you know the "rooftop" coordinates that you want to face, you can compute the heading required from the coordinates of the nearest streetview camera location and the coordinates of the location in question.

Be sure to set the radius to 50 or less if you want the closest panorama (from the documentation):

If the radius is 50 meters or less, the panorama returned will be the nearest panorama to the given location.

var streetViewMaxDistance = 50;
var streetViewService = new google.maps.StreetViewService();

streetViewService.getPanoramaByLocation(lookat, streetViewMaxDistance, function (streetViewPanoramaData, status) {
    if (status === google.maps.StreetViewStatus.OK) {
        var oldPoint = point;
        point = streetViewPanoramaData.location.latLng;
        var SVmarker = new google.maps.Marker({ position: streetViewPanoramaData.location.latLng, map: map});


        var heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, lookat);
        var panoramaOptions = {
            position: oldPoint,
            pov: {
                heading: heading,
                zoom: 1,
                pitch: 0
            },
            zoom: 1
        };
        var myPano = new google.maps.StreetViewPanorama(
        document.getElementById('pano'),
        panoramaOptions);
        myPano.setVisible(true);

    }
});

working fiddle with your coordinates

working code snippet:

function initialize() {
  var fenway = new google.maps.LatLng(42.345573, -71.098326);
  var mapOptions = {
    center: fenway,
    zoom: 19
  };
  // 45.497612,-73.56551
  var lookat = new google.maps.LatLng(45.497671, -73.565611);

  var map = new google.maps.Map(
    document.getElementById('map-canvas'), mapOptions);
  var SVlayer = new google.maps.StreetViewCoverageLayer();
  SVlayer.setMap(map);

  var streetViewMaxDistance = 50;

  var point = new google.maps.LatLng(45.497671, -73.565611);

  var marker = new google.maps.Marker({
    position: lookat,
    map: map
  });
  map.setCenter(lookat);
  var streetViewService = new google.maps.StreetViewService();

  streetViewService.getPanoramaByLocation(lookat, streetViewMaxDistance, function(streetViewPanoramaData, status) {

    if (status === google.maps.StreetViewStatus.OK) {
      var oldPoint = point;
      point = streetViewPanoramaData.location.latLng;
      var SVmarker = new google.maps.Marker({
        position: streetViewPanoramaData.location.latLng,
        map: map
      });


      var heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, lookat);
      document.getElementById('info').innerHTML = "heading=" + heading;
      var panoramaOptions = {
        position: oldPoint,
        pov: {
          heading: heading,
          zoom: 1,
          pitch: 0
        },
        zoom: 1
      };
      var lineSymbol = {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
      };
      var polyline = new google.maps.Polyline({
        map: map,
        path: [streetViewPanoramaData.location.latLng, lookat],
        icons: [{
          icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
          },
          offset: '100%'
        }]
      });
      var myPano = new google.maps.StreetViewPanorama(
        document.getElementById('pano'),
        panoramaOptions);
      myPano.setVisible(true);

    }
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
<div id="info"></div>