Multiple Google Street Views on the same page - google-maps

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>