streetview and map side by side - google-maps

Question

I am trying to implement this example on my webforms page, slightly different. I have a map and when I change its mode to streetview, I want to show a small map on its bottom left corner that follows the streetview. The image I think is clear of what I try to achieve.
When the map is initialised I do the following
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 10,
tilt: 30,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var smallmapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);
and when the pegman is dropped I set the streetview to the little map as following
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function () {
if (this.getVisible()) {
$("#smallmap").show();
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(latitude, longitude),
pov: {
heading: 34,
pitch: 10
}
});
smallmap.setStreetView(streetViewPanorama);
} else {
$("#smallmap").hide();
}
});
however I do not get the desired result as you see in this pic. My setup or way of doing this must be wrong.
edit: I also tried the following, but no difference
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(this.position.lat(), this.position.lng()),
pov: {
heading: 34,
pitch: 10
}
});
by the way, I do not understand this pov property of the above, maybe this is causing the issue?

Answer 1

I changed the smallmapOptions code to the following and moved it inside the visible_changed event and now I see the small map clearly with the pegman walking according to the map's streetview
var smallmapOptions = {
center: new google.maps.LatLng(this.position.lat(), this.position.lng()),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);