Инициализируйте setPano() для google.maps.StreetViewPanorama с помощью события click маркера карты Google. Работает только первый раз

Question

У меня на странице есть карта Google и программа просмотра панорам улиц. На моей карте Google нарисовано мало маркеров, несущих некоторую информацию о панорамах, например, panoId, Panoname и т. Д. А в программе просмотра панорам улиц я показываю одну из самых первых панорам из всех тех панорам, чьи маркеры есть на карте. Теперь я хочу создать событие щелчка по маркеру, чтобы инициализировать / загрузить новое изображение панорамы в просмотрщике улиц. Созданное мной событие нажатия работает только в первый раз, когда я нажимаю в следующий раз, на консоли возвращается ошибка (Uncaught TypeError: a.ha is not a function), который показывает на изображении ниже:

Вот мой код:

<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); срабатывает только один раз за маркер

Answer 1

Не знаю, почему панорама не работает во второй раз. Обходной путь, который работает для меня, состоит в том, чтобы каждый раз создавать панораму в прослушивателе событий click:

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);
});

доказательство концепции скрипки

фрагмент кода:

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>