streetview visible_changed event does not giving panorama position and zoom - google-maps-api-3

Question

I am trying to capture when the pegman icon is dropped on the google maps and send the panorama position and zoom to server. The code below is for listening to visible_changed event. But the thePanorama.getZoom() and getPosition() return undefined.
thePanorama = map.getStreetView();
streetviewChangeListener = google.maps.event.addListener(thePanorama, 'visible_changed', function() {
console.log('visible_changed ');
console.log('streetview panorama position: ' + thePanorama.getPosition() + ' zoom: ' + thePanorama.getZoom());
emitStreetViewEvents({position: thePanorama.getPosition(), zoom: thePanorama.getZoom()});
});
Help?

Answer 1

unfortunately I had a simulare problem, calculating the distance between markers en panorama position to hide and show the markers.
I concluded that with the visible_changed you get the position from before the change.
To get this working I had to add an extra listener for the position_changes.
In my code I have to kinds of markers, one kind linking to panorama's and one linking to external websites, both visible in map mode. In panorama mode the panorama markers are hidden. The website markers are checked with distance from the panorama position and showing only the markers in a certain distance.
google.maps.event.addListener(panorama, 'visible_changed', function() {
if (panorama.getVisible()) {
hideMarkers();
checkZelfstudies();
} else {
showMarkers();
showZelfstudies();
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
checkZelfstudies();
});
https://developers.google.com/maps/documentation/javascript/streetview?hl=nl#StreetViewEvents
Hope this helps you solving your problem. It works in my code.

Answer 2

I just encode something for update the position and zoom when the pegman is dropped in google maps version 3, so, using your variables and adding some others lines, maybe it will help you:
var marker;
var latlng;
var map;
var panorama;
function initialize(position) {
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
thePanorama.setStreetView(panorama);
google.maps.event.addListener(panorama, 'position_changed', function() {
marker.setMap(null);
marker = new google.maps.Marker({
position: panorama.getPosition(),
map: map,
draggable: false
});
map.setCenter(marker.getPosition());
console.log(marker.position.lat());
console.log(marker.position.lng());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log('zoom_changed');
console.log(thePanorama.getZoom());
});
google.maps.event.addListener(panorama, 'pano_changed', function() {
console.log(panorama.getPano());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
console.log(panorama.getPov().heading % 360);
console.log(panorama.getPov().pitch);
});
}
I hope it works for you, greetings.