How to check if Google Street View available and display message?
Asked Answered
C

3

19

I am passing lat and lng variables and display google sreet view in a div. The problem is that when the StreetView is unavilable then nothing is displayed. I would like to check if there is a streetview for a given lat and lng and display a message. Here is my code:

var myPano = new GStreetviewPanorama(document.getElementById("street2"), panoOpts);
var location = new GLatLng(lat,lng)
myPano.setLocationAndPOV(location);

Maybe I should use something like: Event.addListener(myPano, "error", errorMessage());

Any ideas?

Consolidation answered 20/4, 2010 at 12:29 Comment(0)
V
41

In v3 this has changed a bit. Check out the documentation at http://code.google.com/apis/maps/documentation/javascript/reference.html#StreetViewService

The updated code is:

var streetViewService = new google.maps.StreetViewService();
var STREETVIEW_MAX_DISTANCE = 100;
var latLng = new google.maps.LatLng(40.7140, -74.0062);
streetViewService.getPanoramaByLocation(latLng, STREETVIEW_MAX_DISTANCE, function (streetViewPanoramaData, status) {
    if (status === google.maps.StreetViewStatus.OK) {
        // ok
    } else {
        // no street view available in this range, or some error occurred
    }
});
Varitype answered 17/9, 2011 at 22:58 Comment(1)
Keep in mind that getPanoramaByLocation is asynchronous. Meaning anything you want to do as a result of the check has to go into the call back function.Recrudescence
M
17

You may want to check out the following reference:

Determining whether a road supports Street View by visual inspection of the GStreetviewOverlay is not often feasible, or desirable from a user's perspective. For that reason, the API provides a service which programmatically requests and retrieves Street View data. This service is facilitated through use of the GStreetviewClient object.

Basically you can use the getNearestPanoramaLatLng() method of the GStreetviewClient class, which will return you a GLatLng of the nearest point where street view is available. You can then use the distanceFrom() method to check if the nearest street view point is within a certain threshold from your source point.

Here is a full example, which I believe should be self explanatory:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API - Street View Availability</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body> 
    <script type="text/javascript"> 
       var testPoint = new GLatLng(40.7140, -74.0062);   // Broadway, New York
       var svClient = new GStreetviewClient();

       svClient.getNearestPanoramaLatLng(testPoint, function (nearest) {
          if ((nearest !== null) && (testPoint.distanceFrom(nearest) <= 100)) {
             alert('Street View Available');             // Within 100 meters
          }
          else {
             alert('Street View Noet Available');        // Not within 100 meters
          }
       });
    </script> 
  </body> 
</html>
Manipulate answered 20/4, 2010 at 15:29 Comment(1)
This answer is outdated. See the V3 answer and docsRecrudescence
B
2

Update for Google Maps JavaScript API v3.25+: In v3.25 (current release version) and v3.26 (current experimental version), getPanoramaByLocation() is still available but not documented anymore.

@arthur-clemens's accepted answer still works, but use getPanorama() with a StreetViewLocationRequest instead if you want better compatibility:

var gstService = new google.maps.StreetViewService();

gstService.getPanorama({
    location: new google.maps.LatLng(40.7140, -74.0062),
    source: google.maps.StreetViewSource.OUTDOOR
}, function (data, status) {
    if (status === google.maps.StreetViewStatus.OK) {
        // OK
    } else {
        // error or no results
    }
});

Omit source in the StreetViewLocationRequest if you do not want the panorama search to be limited to outdoor ones.

Breastplate answered 12/10, 2016 at 10:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.