Enable Panorama (Street View) mode with Function Javascript

Asked

Viewed 98 times

0

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!

javascript html google-maps maps google-maps-api-3

  • Incredibly, by developing this question, I think I’ve come up with a solution... and it really did. It worked! hehe, and now, answer my own question?

  • 1

    yes, can answer without fear, good that serves for the next people who have this problem understand how you came to this solution

1 answer

0

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.

Browser other questions tagged javascript html google-maps maps google-maps-api-3

You are not signed in. Login or sign up in order to post.