How to load a streetview container at specific latlong but also click event to get streetview?

Question

I have two containers set up side by side with a hybrid googlemap on the left and a streetview container on the right. Right now you can click on the left map to bring up the streetview of that location on the right. On initial load, there streetview container is blank.

Is there anyway to get the streetview container to load a specific latlong on start AND also allow users to click on the left map to bring up a different streetview? (current code for pano below...)

panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));


  google.maps.event.addListener(map, 'click', function(event) {
      sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var Clickmarker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 180,
      pitch: 5
    });
    panorama.setVisible(true);

    google.maps.event.addListener(clickmarker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(ClickmarkerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    alert('Street View data not found for this location.');
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Add this to your initialize function:

var latLng = new google.maps.LatLng(45,-85); // coordinates of desired location.
sv.getPanoramaByLocation(latLng, 50, processSVData);

And this to the processSVData function:

// Set the Pano to use the passed panoID
panorama.setPano(data.location.pano);
panorama.setPov({
    heading: 270,
    pitch: 0
});
panorama.setVisible(true);

working fiddle

working code snippet:

var map;
var berkeley = new google.maps.LatLng(37.869085, -122.254775);
var sv = new google.maps.StreetViewService();

var panorama;

function initialize() {

  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));

  // Set up the map
  var mapOptions = {
    center: berkeley,
    zoom: 16,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  google.maps.event.addListener(map, 'click', function(event) {
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });

  // coordinates of desired location.
  sv.getPanoramaByLocation(berkeley, 50, processSVData);
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    google.maps.event.addListener(marker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });

    // Set the Pano to use the passed panoID
    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:400px; height:400px; border: 2px solid #3872ac;"></div>
<div id="pano" style="width:400px; height:400px; border: 2px solid #3872ac;"></div>