0

Como chamar o modo panorama do Google Maps, via API?

Utilizando JS, é possível parametrizar e exibir o Maps do Google de modo customizado:

//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>


No caso, para chamar o Modo Street View, pode ser utilizado o jeito convencional do Google Maps (Arrastando o bonequinho amarelo até a um ponto que aceite visualização Panorama), porem gostaria de saber como chama via DOM.

Acredito que poderia atrelar um Evento ao Mark/Pin dessa maneira:

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

Mas não estou conseguindo compreender como isso ocorrerá. Tentei de algumas formas que não funcionaram.

Caso alguém já tenha usado está prática, por gentileza, compartilhe! Se eu estiver viajando e isso seja impossível, por gentileza, também me alerte e retiro a pergunta para evitar problemas!

2
  • Incrivelmente, desenvolvendo esta pergunta, acho que cheguei a uma solução... e realmente. funcionou! hehe, e agora, respondo minha própria pergunta? Commented 14/12/2015 às 16:14
  • 1
    sim, pode responder sem medo, bom que serve para as próximas pessoas que tiverem este problema entender como você chegou a esta solução Commented 14/12/2015 às 16:28

1 Resposta 1

0

Bem,

desenvolvendo a pergunta, achei a resposta!

Basta chamar o modo panorama da mesma forma que chamou o Maps. Só que agora, em vez de atrelar ao evento de carregamento da página, por exemplo, basta chama-lo no evento que desejar:

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
   });
});

Isso irá substituir a instancia do MAPS criada com o carregamento (seguindo o que foi definido durante a pergunta).

Aqui segue o link(em Inglês) para a explicação completa de como utilizar o Google Street View: https://developers.google.com/maps/documentation/javascript/streetview

No link também há as definições dos parâmetros para customização.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .