initialize setPano() for google.maps.StreetViewPanorama with google map marker's click event. Works only first time

Question

I have a google map and a streetview panorama viewer on a page. There are few markers draw on my google map carrying some info of panorama eg panoId, Panoname etc. And in the streetview panorama viewer i am showing one of very first panorama of all those panorama whose markers are on map. Now i want to create a click event on marker to initialize/load new panorama image on streetviewpanorama viewer. The click event i have created works only for first time when i click next time it returns error on console (Uncaught TypeError: a.ha is not a function) which is showing in the image below:

Here is my code:

<div class="col-md-12" style="padding-bottom:20px;">
    <div id="tourmap"></div>
    <div id="panomap"></div>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('tourmap'), {
  zoom: 22,
  center: {lat: latitude, lng: longitude}
});
setMarkers(map);
}

var beaches = [
['pano1.jpg',30.878170532669305, 75.8590769883433,'CAoSLEFGMVFpcFBta1ZwakNRc2V2NkhrWjdGTmIxeXRJeWRYd2E3TF9paVRKN1FP',31],
['pano2.jpg',30.87816823063522, 75.85907497668654,'CAoSLEFGMVFpcE5Ca2Zld3pVVEkyS0pjWGxjNHZOZ0c1bTE4MzhfdkdIN3VSNkRw',32],
['pano3.jpg',30.87816823063522, 75.85907967055232,'CAoSLEFGMVFpcE10UlhvcHU5QWxOckRxX0ZaZm5aYVJKSmFKWlExcEpNMWJ4aE55',33],
['pano4.jpg',30.87816650410961, 75.8590769883433,'CAoSLEFGMVFpcFB5V045allBU1Qzal9hSFVIVXlHa05TaXl0MkRyNUpOZjFxUjVF',34],

];


function setMarkers(map) {

              var image = {
                url: 'http://sonedomain.com/img/reddot_location.gif',
                size: new google.maps.Size(20, 32),
                origin: new google.maps.Point(0, 0),
                (0, 32).
                anchor: new google.maps.Point(0, 32)
              };

              var panorama = new google.maps.StreetViewPanorama(
                            document.getElementById('panomap'), {
                              pov: {heading: 165, pitch: 0},
                              motionTracking: false,
                              motionTrackingControl: false
                            });

              var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
              };
              for (var i = 0; i < beaches.length; i++) {
                var beach = beaches[i];
                var marker = new google.maps.Marker({
                  position: {lat: beach[1], lng: beach[2]},
                  map: map,
                  icon: image,
                  draggable:true,
                  shape: shape,
                  title: beach[3],
                  panoid: beach[3],
                  localid: beach[4] 
                });


                marker.addListener('click', function(){

                    panorama.setPano(this.panoid);
                });


              } // for ends


            } // setMarkers ends
</script>

panorama.setPano(this.panoid); fires only once for a marker

Answer 1

Don't know why the panorama doesn't work a second time. A workaround which works for me, would be to create the panorama each time in the click event listener:

marker.addListener('click', function() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('panomap'), {
      pov: {
        heading: 165,
        pitch: 0
      },
      motionTracking: false,
      motionTrackingControl: false
    });
  panorama.setPano(this.panoid);
});

proof of concept fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('tourmap'), {
    zoom: 22,
    center: {
      lat: 30.878170532669305,
      lng: 75.8590769883433
    }
  });
  setMarkers(map);
}

var beaches = [
  ['pano1.jpg', 30.878170532669305, 75.8590769883433, 'CAoSLEFGMVFpcFBta1ZwakNRc2V2NkhrWjdGTmIxeXRJeWRYd2E3TF9paVRKN1FP', 31],
  ['pano2.jpg', 30.87816823063522, 75.85907497668654, 'CAoSLEFGMVFpcE5Ca2Zld3pVVEkyS0pjWGxjNHZOZ0c1bTE4MzhfdkdIN3VSNkRw', 32],
  ['pano3.jpg', 30.87816823063522, 75.85907967055232, 'CAoSLEFGMVFpcE10UlhvcHU5QWxOckRxX0ZaZm5aYVJKSmFKWlExcEpNMWJ4aE55', 33],
  ['pano4.jpg', 30.87816650410961, 75.8590769883433, 'CAoSLEFGMVFpcFB5V045allBU1Qzal9hSFVIVXlHa05TaXl0MkRyNUpOZjFxUjVF', 34],

];

function setMarkers(map) {
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {
        lat: beach[1],
        lng: beach[2]
      },
      map: map,
      draggable: true,
      title: beach[3],
      panoid: beach[3],
      localid: beach[4]
    });
    marker.addListener('click', function() {
      var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('panomap'), {
          pov: {
            heading: 165,
            pitch: 0
          },
          motionTracking: false,
          motionTrackingControl: false
        });
      panorama.setPano(this.panoid);
    });
  } // for ends
} // setMarkers ends
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.col-md-12 {
  width: 100%;
  height: 100%;
}

#tourmap {
  width: 50%;
  height: 100%;
  float: left;
}

#panomap {
  width: 50%;
  height: 100%;
  float: right;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col-md-12" style="padding-bottom:20px;">
  <div id="tourmap"></div>
  <div id="panomap"></div>
</div>