Google maps street view availability

I have the following simple code that will display the google street view on a webpage for me.

var panoramaOptions = {
            position: myLatlng,
            pov: {
              heading: 34,
              pitch: 10
            }
          };


          var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

          map.setStreetView(panorama);

The only issue I am having that if i'm searching for somewhere like Malta there is no street view available. This is leaving a big ugly blank space on my webpage. Is there a way I can detect if street view is available at a certain location and if it's not stop the map from generating?

Thanks in advance

Solution

Yes. Try and get a Street View for your location, and check its status. Here's how I do it:

<!DOCTYPE html>
<html>
<head>
<title>Streetview</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#streetView { height: 100%; width: 100%; }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script>
    function createStreetMap(mapCanvasID, lat, lng)
    {
        //create a google latLng object
        var streetViewLocation = new google.maps.LatLng(lat, lng);
        var panorama;

        //once the document is loaded, see if google has a streetview image within 50 meters of the given location, and load that panorama
        var streetview = new google.maps.StreetViewService();

        streetview.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
            if (status == 'OK') {
                //google has a streetview image for this location, so attach it to the streetview div
                var panoramaOptions = {
                    pano: data.location.pano,
                    addressControl: false,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    }
                }; 
                var panorama = new google.maps.StreetViewPanorama(document.getElementById(mapCanvasID), panoramaOptions);
            }
            else{
                //no google streetview image for this location, so hide the streetview div
                $('#' + mapCanvasID).parent().hide();
            }
        });

        return panorama;
    }

    $(document).ready(function() {
        var myPano = createStreetMap('streetView', 0, 0);
    });
</script>

</head>
<body>
    <div>
        <h2>Street View</h2>
        <div id="streetView"></div>
    </div>
</body>
</html>