Multiple Google Street Views on the same page

Question

I am trying to embed two Google Street View controls on the same page, it should look something like this:

How the end result should look like

I want my visitors to use the controls on both elements to navigate around the area with their mouse. Is this possible on the same HTML page?

Answer 1

Example of multiple (3) streetView panoramas

(taken from various examples in the documentation, uses (but doesn't really require) JQuery.

code snippet:

function initPano() {
  var panoramas = [];
  panoDivs = document.getElementsByClassName('pano');
  $(".pano").each(function(idx, el) {
    console.log("idx=" + idx + " lat:" + parseFloat($(this).data("lat")) + " lng:" + parseFloat($(this).data("lng")) + " heading:" + parseFloat($(this).data("heading")));
    var panorama = new google.maps.StreetViewPanorama(
      el, {
        position: {
          lat: parseFloat($(this).data("lat")),
          lng: parseFloat($(this).data("lng"))
        },
        pov: {
          heading: parseFloat($(this).data("heading")),
          pitch: 0
        },
        visible: true
      });
    panoramas.push(panorama);
  });

}
google.maps.event.addDomListener(window, "load", initPano);

html,
body {
  margin: 0;
  padding: 0;
}
.pano {
  height: 200px;
  width: 200px;
  margin: 2px;
  padding: 2px;
}
.col {
  height: 200px;
  width: 620px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col">
  <div style="float:left" class="pano" data-lat="42.345573" data-lng="-71.098326" data-heading="34"></div>
  <div style="float:right" class="pano" data-lat="40.729884" data-lng="-73.990988" data-heading="265"></div>
  <div class="pano" data-lat="37.869260" data-lng="-122.254811" data-heading="165"></div>
</div>