I'm having trouble adding an EVENT listener to Google Street View to get POV settings?

Question

I start with Google Map centered on a test marker and on click it switches to Street View with a set POV and ZOOM.

I want to be able catch and display Heading, Pitch and Zoom but I can't get the event listener to fire on pov_changed. I have added a few lines to show the settings that Street View starts on.

My code: http://jsfiddle.net/chrisloughnane/Q2GZT/

I have based my approach on http://quaystreet.chrisloughnane.net/index-view.html from a Google API example.... and still don't see why my listener wont fire.

Could someone point out what I'm doing wrong please?

(aside, I initially tried to get the POV settings in Chrome console and it just reported pano undefined etc. Is it possible to get access map/street view variables in the console?)

This is my code for the listener

google.maps.event.addListener(pano, 'pov_changed', function() { 
  document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
  document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
  document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
});

COMPLETE CODE

$(document).ready(function() {

    function renderMap(){

        var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
        var myOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        var iconBase = 'http://quaystreet.chrisloughnane.net/images/';

        var markerPos = new google.maps.LatLng(53.270433, -9.054760999999985);

        var marker = new google.maps.Marker({
           position: markerPos,
           map: map,
           title: "Street Recal",
           icon: iconBase + 'camera_small.png'
        });
var pano = null;
        google.maps.event.addListener(marker, 'click', function() {
            map.setZoom(19);
            map.setCenter(marker.getPosition());
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), {
                navigationControl: false,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
                enableCloseButton: true,
                addressControl: false,
                linksControl: false,
                panControl: false,
                clickToGo: false,
                scrollwheel: true,
                draggable: false,
                pov: {
                        heading: 24.061926972355707,
                        pitch: 1.942235903158224,
                        zoom: 1.5
                }
            });
            pano.bindTo("position", marker);
            pano.setVisible(true);
            /* THIS IS PLACED HERE TO JUST SHOW SETTINGS CAN BE DISPLAY */
            document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
            document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
            document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
        });

        google.maps.event.addListener(map, 'zoom_changed', function() { 
        zoom = map.getZoom(); 
            if(zoom<15) { 
                map.setMapTypeId(google.maps.MapTypeId.ROADMAP); 
            } else {
                map.setMapTypeId(google.maps.MapTypeId.HYBRID); 
            }
        });
        /* THIS EVENT LISTENER */
        google.maps.event.addListener(pano, 'pov_changed', function() { 
            document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
            document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
            document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
        });
    }   
    renderMap(); 
});

Answer 1

Move the pano event listener in to the code where it is defined:

updated fiddle

function renderMap(){

   var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
   var myOptions = {
       zoom: 7,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

   var iconBase = 'http://quaystreet.chrisloughnane.net/images/';

   var markerPos = new google.maps.LatLng(53.270433, -9.054760999999985);

   var marker = new google.maps.Marker({
      position: markerPos,
      map: map,
      title: "Street Recal",
      icon: iconBase + 'camera_small.png'
   });
   var pano = null;
   google.maps.event.addListener(marker, 'click', function() {
       map.setZoom(19);
       map.setCenter(marker.getPosition());
       map.setMapTypeId(google.maps.MapTypeId.HYBRID);
       pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), {
           navigationControl: false,
           navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
           enableCloseButton: true,
           addressControl: false,
           linksControl: false,
           panControl: false,
           clickToGo: false,
           scrollwheel: true,
           draggable: false,
           pov: {
                   heading: 24.061926972355707,
                   pitch: 1.942235903158224,
                   zoom: 1.5
           }
        });
       pano.bindTo("position", marker);
       pano.setVisible(true);
       /* THIS IS PLACED HERE TO JUST SHOW SETTINGS CAN BE DISPLAY */
       document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
       document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
       document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
       /* THIS EVENT LISTENER */
       google.maps.event.addListener(pano, 'pov_changed', function() { 
         document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
         document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
         document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
       });
    });

    google.maps.event.addListener(map, 'zoom_changed', function() { 
       zoom = map.getZoom(); 
       if(zoom<15) { 
           map.setMapTypeId(google.maps.MapTypeId.ROADMAP); 
       } else {
           map.setMapTypeId(google.maps.MapTypeId.HYBRID); 
       }
   });
}