Google MapsV3 StreetView problem - not working if streetview not available

We have a standard map (MapTypeId.ROADMAP) with a marker on it. Above the map is a button that says 'Show StreetView'. If the user clicks on it, it loads StreetView at the position of the marker (in the same div). The button changes to 'Hide StreetView' and if clicked the map reverts back to the standard ROADMAP. Users can also use the 'pegman' to simulate the same bahviour obviously.

The problem began when there was no actual streetview available at the position of the marker. We handled this with an event listener, if no streetview was available a message is displayed informing the user, and returns false to prevent 'showing' the non existant streetview. Worked great, except when the user tried to use the 'pegman' - because we had already loaded (but not displayed) a streetview (which wasn't there). When the user dropped the pegman on the map the first time nothing happened, but our 'Show/Hide button' changed. On the second drop of pegman it changed to streetview, but our 'show/hide button' was now out of kilter (it was displaying 'show street view' when already there, and 'hide street view' when on ROADMAP.

We tried changing our code structure - streetview (var panorama = ...) is only initialised through an 'onclick' javascript function (it was initially bundled in with the 'loadMap' function, now it has been seperated to another function) on our show/hide button - if streetview available, great change to it and change the button, if not return false and display message to user. This works great, but now if the user uses the 'pegman' to go to streetview the buttons do not change because it has been seperated into another function.

I'm at my whits end, three days of trying all kinds of options and I cannot figure out how to listen in the 'loadMap' function for a 'change to streetview via pegman dropping' (see the 'visible_changed' event listener in the loadMap code below) - If I can figure this out I can change the button display, but for the life of me I cannot figure it out (investigated DOM mutations to listen for the display of streetview but not very 'cross browser friendly, which is important as the site gets over 4 million hits a month).

Here is the 'loadMap' function

function loadGMap(lat, lng, nachladenAnzeigen, radialConflict){
// Create the Map variables 
 mapDiv = document.getElementById('map');
 width = parseInt(mapDiv.style.width);
 height = parseInt(mapDiv.style.height);
 latlng = new google.maps.LatLng(lat, lng);

// Create Map
var mapOptions = {
  zoom: 14,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false,
  panControl: false
};
map = new google.maps.Map(mapDiv,mapOptions);


... Code here for laying marker to map...

google.maps.event.addListener(map, 'visible_changed', function(){
        alert('please work');
                    // It doesn't - no alert when pegman is dropped :-(
}

// Check for a street view at the marker position
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;
    }
});
... more code (event listeners, ie, zoom changed, etc...

And this is the loadStreetView function which is called via an 'onclick' action on the Show/Hide Streetview button above the map (not that I think you'll need this, it's all working fine for this Use Case, it the damn pegman drop that isn't working, but you never know...)

function loadStreetView(){
// Make 'Show/Hide StreetView' links above the map work     
    // Handle the toggle of StreetView 'button' display
    if(streetViewAvailable == 0){
        noStreetViewVariable = document.getElementById('noStreetView');
        noStreetViewVariable.style.display = "inline";
    开发者_开发知识库    return false;
    }else{ 
        panorama = map.getStreetView();
        panorama.setPosition(latlng);
        panorama.setPov({
            heading: 265,
            zoom:1,
            pitch:0
        });

        var toggle = panorama.getVisible();
        if (toggle == false) {
            panorama.setVisible(true);
            $('#button_streetview').attr("src", 'img/buttons/mapview.png');
        } else {
            panorama.setVisible(false);
            $('#button_streetview').attr("src", 'img/buttons/streetview.png');
        }
    }

    google.maps.event.addListener(panorama, 'visible_changed', function(){
        if(streetViewAvailable == 0){
            $('#button_streetview').attr("src", 'img/buttons/mapview.png');
        }
        else if(streetViewAvailable == 1){
            if (panorama.getVisible() == true ) {

                $('#button_streetview').attr("src", 'img/buttons/mapview.png');
            }
        }
    });

    google.maps.event.addListener(panorama, 'closeclick', function() {
        $('#button_streetview').attr("src", 'img/buttons/streetview.png');
    });
}

Your event listener for 'visible_changed' is on the map object, not the panorama. The Map object (v3) doesn't have a 'visible_changed' event.

My solution (which works for me..) is:

var pano = null ; // on initialize  I use this in the global scope, bad, I know... <br>
var map = null ; // likewise <br>

function init(); <br>
    map = new google.maps.Map(document.getElementById('map'),
        MapOptions ); <br>
    createPano() ; <br>
    ... other init stuff here .. <br>
}

function createPano() { <br>
    if ( pano == null ) { <br>
    pano = map.getStreetView();  //  the api says this creates the default pano object..
<br>    }

&nbsp;          google.maps.event.addListener(pano, "visible_changed",
        function(){ <br>
        alert("position is " + pano.getPosition() ) ; <br>
        // change this to getPanoAndSwitch() when custom panos are available ..
<br>        panoFlag = pano.getVisible();

...
      rest of code here. 

Leastwise, that's what it looks like to me.