Only show google street view when available

Question

I have a dynamic page that pulls different locations depending on the ID. I have three tabs one for the location description, google maps and one for the street view. Everything works - the problem I'm having is when there isn't street view available it shows a grey box.

I thought I found a solution by using 'getPanoramaByLocation' but I can't seem to make it work correctly. This is what I have:

var WINDOW_HTML = '<div style="width: 200px; overflow: hidden; word-wrap:break-word;"><p><?php echo htmlspecialchars($title); ?><br /><?php echo htmlspecialchars($locationDetails); ?></p></div>';
    var map = '';
    var myLatlng;

    /* Check if Streetview is available */
    var latLng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>);                      

    var streetViewCheck = new google.maps.StreetViewService();  
    streetViewCheck.getPanoramaByLocation(latLng, 50, function(result, status) {
            if (status == google.maps.StreetViewStatus.ZERO_RESULTS) {
                streetViewAvailable = 0;        
            } else {
                streetViewAvailable = 1;
            }
    });        

    function initialize() {                 
        myLatlng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>);
        var mapOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('themap'), mapOptions);

        /* Street view addition */                   
        if (streetViewAvailable == 1) {                
            var panoramaOptions = {
            position: myLatlng,
            pov: {
              heading: 34,
              pitch: 10
            },
            visible:true
            };
             var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);                     
            map.setStreetView(panorama);
            alert('Street View Available'); 
        } else {  
            /* Hide the street view tab if it isn't available */
            $('#svTab').hide(); 
            alert('Street View NOT Available');                
        }           

        /* Resize Fix for tabs */
        google.maps.event.addListener(map, 'resize', function() {
            this.setZoom(13);
            this.setCenter(myLatlng);
            var infowindow = new google.maps.InfoWindow({
                content: WINDOW_HTML
            });
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });            
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });                
            infowindow.open(map,marker);
        }); 
        // Tab fix for streetview refresh  
          $('#svTab').on('shown', function (e) {
            $('#pano').show();                   
            panorama.setVisible(true);  

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

I've tried lots of different things and I seem to get varying results - one setup I had seemed to be working, but when I refreshed the page for some unknown reason it would then say my 'streetViewAvailable' wasn't defined (it was as if it wasn't running through my streetViewCheck function).

Answer 1

Finally managed to figure it out. I had to remove the 'streetViewAvailable' variable and instead put a function inside the streetviewstatus if statement. Here's what it ended up looking like.

var WINDOW_HTML = '<div style="width: 200px; overflow: hidden; word-wrap:break-word;"><p><?php echo htmlspecialchars($title); ?><br /><?php echo htmlspecialchars($locationDetails); ?></p></div>';
    var map = '';
    var myLatlng;                     

    function initialize() {                 
        myLatlng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>);
        var mapOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('themap'), mapOptions);


        /* Resize Fix for tabs */
        google.maps.event.addListener(map, 'resize', function() {
            this.setZoom(13);
            this.setCenter(myLatlng);
            var infowindow = new google.maps.InfoWindow({
                content: WINDOW_HTML
            });
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });            
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });                
            infowindow.open(map,marker);
        }); 

        /* Check Streetview is available */
        var streetViewService = new google.maps.StreetViewService();
        var STREETVIEW_MAX_DISTANCE = 50;

        streetViewService.getPanoramaByLocation(myLatlng, STREETVIEW_MAX_DISTANCE, function (streetViewPanoramaData, status) {
            if (status === google.maps.StreetViewStatus.OK) {                   
                function svcheck() {                                                       
                    var panoramaOptions = {
                        position: myLatlng,
                        pov: {
                          heading: 34,
                          pitch: 10
                        },
                        visible:true
                    }
                    var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);                    
                    map.setStreetView(panorama); 

                    // Tab fix for streetview refresh  
                    $('#svTab').on('shown', function (e) {
                        $('#pano').show();                   
                        panorama.setVisible(true);                              
                    });
                }
                svcheck();
            } else {
                /* Street view is unavailable - HIDE THE TAB! */
                $('#svTab').hide(); 
            }
        });

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