Search code examples
google-mapsgoogle-maps-api-3google-geocodergoogle-geocoding-api

Google Streetview API returns a different view than google.com/maps. Any workaround?

So I noticed that google.com/maps provides a different StreetView than my Streetview API with the combination of geolocator.

To show you an example, we will use the following address:

  • 2510 Cherry Valley Blvd Dallas, TX 75241

When getting coordinates of this address, I use the following geocode api:

I then use these coordinates in my Google Streetview API.

However, when I go on google.com/maps, enter the same address and go to streetview, it ends up with slightly different coordinates that better represent the front face of the business address. In this case, the coordinates that it uses are the following:

Below are two images (first the result with Google Maps API, and the second result is with google.com/maps.

How do I make sure that the view returned on my page with Google Maps API is exactly the same as that on google.com/maps?

My client needs this. Any ideas on how to adjust geolocator API or Google Maps API would be greatly appreciated.

My Google Maps API returns the following image (for some reason the view is on the adjecent street, and as a result is slightly incorrect): enter image description here

Google.com/maps returns the following image (address says 2519 Cherry Valley even though I searched for 2510 Cherry Valley). Google api seems to adjust geolocation for more accurate view.

enter image description here

Solution

  • One option is to snap the streetview using the DirectionsService, which returns the place you would drive to.

    proof of concept fiddle

    code snippet:

    var map;
var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address;

function initialize() {
  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
  myLatLng = new google.maps.LatLng(37.422104808, -122.0838851);
  var myOptions = {
    zoom: 15,
    streetViewControl: false
  };

  map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);

  address = "2510 Cherry Valley Blvd Dallas, TX 75241";
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      myLatLng = results[0].geometry.location;

      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map
      });
      map.setCenter(myLatLng);
      // find a Streetview location on the road
      var request = {
        origin: address,
        destination: address,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, directionsCallback);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

  sv.getPanoramaByLocation(myLatLng, 50, processSVData);

  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  google.maps.event.addListener(map, 'click', function(event) {
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      draggable: true,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);

    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
    panorama.setPov({
      heading: heading,
      pitch: 0,
      zoom: 1
    });
    panorama.setVisible(true);

    google.maps.event.addListener(marker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0,
        zoom: 1
      });
      panorama.setVisible(true);
    });
  } else {
    alert("Street View data not found for this location.");
  }
}

function geocoderCallback(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var latlng = results[0].geometry.location;
    map.setCenter(latlng);
    sv.getPanoramaByLocation(latlng, 50, processSVData);

  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
};

function directionsCallback(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var latlng = response.routes[0].legs[0].start_location;
    map.setCenter(latlng);
    sv.getPanoramaByLocation(latlng, 50, processSVData);
  } else {
    alert("Directions service not successfull for the following reason:" + status);
  }
}
google.maps.event.addDomListener(window, "load", initialize);
    html,
body {
  width: 100%;
}
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="pano" style="width: 100%; height: 400px;"></div>
<div id="map_canvas" style="width: 100%; height: 400px;"></div>