google street view with custom panorama and markers - google-maps-api-3

Question

I have this code that uses a custom Google street view panorama and creates some custom markers.
function initialize() {
var panoOptions = {
pano: 'a9V_yZU01A7nTQW7S4Hxjw',
pov: {
heading: 0,
pitch:0
},
zoom: 0
};
var pano = new google.maps.StreetViewPanorama(document.getElementById('virtualTour'), panoOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
var locations = [
['<div style="width: 170px;">MARKERS 1</div>', 37.869197, -122.254583]
];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: pano,
visible: false,
zIndex: 999
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(pano, marker);
}
})(marker, i));
markers.push(marker); // save all markers
}
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(true);
markers[i].setMap(pano);
}
pano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
My question is: why are markers shown only after I move through google street view arrows on floor?
I want markers to be shown on initialize function. Can anyone help me? I have created a jsfiddle for my project:
http://jsfiddle.net/7HpmE/
Thanks in advance!

Answer 1

Better late than never.
I was able to fix your problem by simply reloading the pano after the markers have been added.
All I did was replacing the following line:
pano.setVisible(true);
(the panorama is visible by default) with:
pano.setPano('a9V_yZU01A7nTQW7S4Hxjw');
Here is an updated version of your jsfidle:
http://jsfiddle.net/7mfswdbg/