Enable Panorama (Street View) mode with Function Javascript

Question

How to call Google Maps panorama mode, via API?

Using JS, you can configure and display Google Maps in a customized way:

//Setup Maps
function initialize(){

  var geoLatLong = {lat:-23.5615129,lng:-46.6581976};

  var mapOptions = {
    zoom: 15,
    disableDefaultUI: true,    
    center: geoLatLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    streetViewControl: true,
    mapTypeControl: false
  };
  
  var map = new google.maps.Map(document.getElementById('divparamaps'),mapOptions);
  
  var image = 'logo.png';

  var pinPersonalizado = new google.maps.Marker({
    position: geoLatLong,
    map: map,
    icon: image,
    title: 'Masp Museu de Arte de São Paulo Assis Chateubriand - Avenida Paulista, São Paulo - SP',
    animation: google.maps.Animation.DROP
  });
}

//Após o carregamento do Document, chama o maps
google.maps.event.addDomListener(document, "load", initialize);

<!-- Considerar o import da API no Header -->
<div id="divparamaps"></div>

---

In this case, to call the Street View Mode, can be used the conventional way of Google Maps (Dragging the little yellow doll to a point that accepts Panorama view), but would like to know how to call via DOM.

I believe I could link an Event to the Mark/Pin that way:

pinPersonalizado.addListener('click', function() {
      // Chama Street View
});

But I can’t understand how this is going to happen. I tried a few ways that didn’t work.

In case someone has already used this practice, please share! If I am traveling and this is impossible, please also alert me and withdraw the question to avoid problems!

Answer 1

Well,

developing the question, I found the answer!

Just call panorama mode the same way you called Maps. Only now, instead of linking to the page load event, for example, just call it in the event you want:

Ex:

pinPersonalizado.addListener('click', function() {
  var panorama = new google.maps.StreetViewPanorama(
  document.getElementById('divparamaps'), {
     position: {lat:-23.6331987,lng:-46.6917166},
     pov: {
       heading:0,
       pitch:0
     },
     zoom:0,
     visible: true
   });
});

This will replace the MAPS instance created with the upload (following what was set during the question).

Here is the link (in English) for the full explanation of how to use Google Street View: https://developers.google.com/maps/documentation/javascript/streetview

In the link there are also settings of parameters for customization.