Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Maps JavaScript API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Maps JavaScript API e serviços relacionados
  3. Criar chaves apropriadas
Continuar

Serviço Street View

Visão geral

O Google Street View fornece visualizações panorâmicas de 360 graus de vias designadas em toda a área de cobertura. A cobertura da API do Street View é a mesma do aplicativo do Google Maps (https://maps.google.com/). A lista de cidades onde o Street View está disponível pode ser encontrada no site do Google Maps.

Veja a seguir um exemplo de imagem do Street View.


A Google Maps JavaScript API fornece um serviço Street View para obter e manipular as imagens usadas no Google Maps Street View. O serviço Street View conta com suporte nativo no navegador.

Uso de mapas do Street View

Embora o Street View possa ser usado em um elemento DOM independente, ele é mais útil quando indica uma localização em um mapa. Por padrão, o Street View está ativado em um mapa e um controle Pegman do Street View é exibido nos controles de navegação (zoom e deslocamento). Esse controle pode ser oculto nas MapOptions do mapa definindo streetViewControl como false. Também é possível alterar a posição padrão do controle Street View definindo a propriedade streetViewControlOptions.position do Map como uma nova ControlPosition.

O controle Pegman do Street View permite visualizar panoramas do Street View diretamente no mapa. Quando o usuário clica e mantém o botão pressionado sobre o Pegman, o mapa é atualizado para mostrar contornos azuis em volta de ruas com Street View ativado, oferecendo uma experiência de usuário semelhante ao do aplicativo do Google Maps.

Quando o usuário solta o marcador Pegman em uma rua, o mapa é atualizado para exibir um panorama do Street View da localização indicada.

Panoramas do Street View

As imagens do Street View são disponibilizadas com o uso do objeto StreetViewPanorama, que fornece uma interface de API para o "visualizador" do Street View. Cada mapa contém um panorama do Street View padrão, que pode ser recuperado chamando o método getStreetView() do mapa. A adição de um controle do Street View ao mapa definindo a opção streetViewControl como true conecta automaticamente o controle Pegman a esse panorama padrão do Street View.

Também é possível criar o seu objeto StreetViewPanorama e configurar o mapa para usá-lo em vez do panorama padrão. Isso é feito definindo explicitamente a propriedade streetView do mapa para o objeto construído. Substitua o panorama padrão se quiser modificar o comportamento padrão, como o compartilhamento automático de sobreposições entre o mapa e o panorama. (Consulte Sobreposições no Street View abaixo.)

Contêineres do Street View

Em vez disso, você pode exibir um StreetViewPanorama em um elemento DOM separado, que é frequentemente um elemento <div>. Basta passar o elemento DOM no construtor do StreetViewPanorama. Para a exibição ideal de imagens, recomendamos um tamanho mínimo de 200 por 200 pixels.

Observação: embora a funcionalidade do Street View seja projetada para uso em conjunto com um mapa, esse uso não é obrigatório. É possível usar um objeto Street View de forma independente, sem um mapa.

Localizações e ponto de vista (POV) do Street View

O construtor do StreetViewPanorama também permite definir a localização e o ponto de vista do Street View usando o parâmetro StreetViewOptions. Chame setPosition() e setPov() no objeto após a construção para alterar a localização e o POV.

A localização do Street View define o posicionamento do foco da câmera para uma imagem, mas não define a orientação da câmera para essa imagem. Para essa finalidade, o objeto StreetViewPov define duas propriedades:

  • heading (padrão 0) define o ângulo de rotação em volta do centro da câmera em graus a partir do norte verdadeiro. Os rumos são medidos no sentido horário (o rumo de 90 graus corresponde ao leste verdadeiro).
  • pitch (padrão 0) define a variação de ângulo para cima ou para baixo a partir da inclinação padrão inicial da câmera, que muitas vezes (mas nem sempre) é plana horizontal. (Por exemplo, uma imagem capturada em uma colina provavelmente terá um valor padrão de inclinação não horizontal.) Os ângulos de inclinação são medidos com valores positivos olhando para cima (até +90 graus, diretamente para cima e ortogonal à inclinação padrão) e valores negativos olhando para baixo (até -90 graus diretamente para baixo e ortogonal à inclinação padrão).

O objeto StreetViewPov é frequentemente usado para determinar o ponto de vista da câmera do Street View. Também é possível determinar o ponto de vista do fotógrafo (normalmente, a direção do carro ou triciclo) com o método StreetViewPanorama.getPhotographerPov().

O código a seguir exibe um mapa de Boston com uma visualização inicial do Fenway Park. Selecione o Pegman e arraste-o até uma localização permitida no mapa para alterar o panorama do Street View:

function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}
<div id="map"></div>
<div id="pano"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map, #pano {
  float: left;
  height: 100%;
  width: 45%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}

Ver o exemplo (streetview-simple.html).

Rastreamento de movimento em dispositivos móveis

Em dispositivos que permitem eventos de orientação de dispositivo, a API oferece aos usuários a capacidade de alterar o ponto de vista do Street View de acordo com o movimento do dispositivo. Os usuários podem olhar em volta movimentando os dispositivos. Isso é denominado rastreamento de movimento ou rastreamento de rotação do dispositivo.

Como desenvolvedor de aplicativos, você pode alterar o comportamento padrão da seguinte forma:

  • Ativar ou desativar a funcionalidade de rastreamento de movimento. Por padrão, o rastreamento de movimento é ativado em qualquer dispositivo compatível. O exemplo a seguir desativa o rastreamento de movimento, mas deixa o controle de rastreamento de movimento visível. (Observe que o usuário pode ativar o rastreamento de movimento tocando no controle.)
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • Ocultar ou mostrar o controle de rastreamento de movimento. Por padrão, o controle é mostrado em dispositivos compatíveis com rastreamento de movimento. O usuário pode tocar o controle para ativar ou desativar o rastreamento de movimento. Observe que o controle nunca será exibido se o dispositivo não for compatível com o rastreamento de movimento, independentemente do valor de motionTrackingControl.

    O exemplo a seguir desativa o rastreamento de movimento e o controle do rastreamento de movimento. Neste caso, o usuário não pode ativar o rastreamento de movimento:

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false,
          motionTrackingControl: false
        });
    
  • Alterar a posição padrão do controle de rastreamento de movimento. Por padrão, o controle aparece perto do canto inferior direito do panorama (posição RIGHT_BOTTOM). O exemplo a seguir define a posição do controle para o canto esquerdo:
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTrackingControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
          }
        });
    

Para visualizar o rastreamento de movimento em ação, veja o exemplo a seguir em um dispositivo móvel (ou em qualquer dispositivo compatível com eventos de orientação de dispositivo):


Visualize o exemplo em uma nova página (streetview-embed.html).

Sobreposições no Street View

O objeto padrão StreetViewPanorama permite a exibição nativa das sobreposições do mapa. Normalmente, as sobreposições são exibidas no "nível da rua", ancoradas em posições LatLng. (Por exemplo, os marcadores são exibidos com os pontos ancoradas no plano horizontal da localização dentro do panorama do Street View.)

No momento, os tipos de sobreposição permitidas nos panoramas do Street View estão limitados a Marker, InfoWindow e OverlayView personalizados. Sobreposições em um mapa podem ser exibidas em um panorama do Street View tratando o panorama como um substituto do objeto Map, chamando setMap() e passando o StreetViewPanorama como um argumento em vez de mapa. De forma semelhante, é possível abrir janelas de informações em um panorama do Street View chamando open() e passando StreetViewPanorama() em vez de um mapa.

Além disso, em um mapa criado com um StreetViewPanorama padrão, todos os marcadores criados nele são automaticamente compartilhados com o panorama do Street View associado, desde que o panorama seja visível. Para recuperar o panorama padrão do Street View, chame getStreetView() no objeto Map. Observe que, se você definir explicitamente a propriedade streetView do mapa para um StreetViewPanorama que construiu, o panorama padrão será substituído e o compartilhamento automático de sobreposições será desativado.

O exemplo a seguir mostra marcadores indicando várias localizações perto de Astor Place, cidade de Nova York. Alterne a exibição para Street View para mostrar os marcadores compartilhados exibidos no StreetViewPanorama.

var panorama;

function initMap() {
  var astorPlace = {lat: 40.729884, lng: -73.990988};

  // Set up the map
  var map = new google.maps.Map(document.getElementById('map'), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  });

  // Set up the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: {lat: 40.730031, lng: -73.991428},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: {lat: 40.729681, lng: -73.991138},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}
<div id="floating-panel">
  <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input>
</div>
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -100px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var panorama;

function initMap() {
  var astorPlace = {lat: 40.729884, lng: -73.990988};

  // Set up the map
  var map = new google.maps.Map(document.getElementById('map'), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  });

  // Set up the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: {lat: 40.730031, lng: -73.991428},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: {lat: 40.729681, lng: -73.991138},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

Ver o exemplo (streetview-overlays.html).

Eventos do Street View

Ao navegar no Street View ou manipular sua orientação, é possível monitorar diversos eventos que indicam alterações no estado de StreetViewPanorama:

  • pano_changed é acionado sempre que o ID de panorama individual muda. Esse evento não garante que todos os dados associados no panorama (como os links) também sejam alterados no momento do acionamento do evento. Ele indica apenas que o ID de panorama mudou. Observe que o ID de panorama (que pode ser usado para referenciar esse panorama) é estável apenas dentro da sessão atual do navegador.
  • position_changed é acionado sempre que a posição subjacente (LatLng) do panorama muda. A rotação de um panorama não aciona esse evento. Observe que é possível alterar a posição subjacente de um panorama sem mudar o ID de panorama associado, pois a API associa automaticamente o ID de panorama mais próximo à posição do panorama.
  • pov_changed é acionado sempre que o StreetViewPov do Street View muda. Observe que esse evento pode ser acionado enquanto a posição e o ID do panorama permanecem estáveis.
  • links_changed é acionado sempre que os links do Street View mudam. Observe que esse evento pode ser acionado de forma assíncrona na alteração do ID de panorama indicado por pano_changed.
  • visible_changed é acionado sempre que a visibilidade do Street View muda. Observe que esse evento pode ser acionado de forma assíncrona na alteração do ID de panorama indicado por pano_changed.

O código a seguir mostra como processar esses eventos para coletar dados sobre o StreetViewPanorama subjacente:

function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869, lng: -122.255},
        pov: {
          heading: 270,
          pitch: 0
        },
        visible: true
  });

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}
<div id="pano"></div>
<div id="floating-panel">
<table>
  <tr>
    <td><b>Position</b></td><td id="position-cell">&nbsp;</td>
  </tr>
  <tr>
    <td><b>POV Heading</b></td><td id="heading-cell">270</td>
  </tr>
  <tr>
    <td><b>POV Pitch</b></td><td id="pitch-cell">0.0</td>
  </tr>
  <tr>
    <td><b>Pano ID</b></td><td id="pano-cell">&nbsp;</td>
  </tr>
  <table id="links_table"></table>
</table>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#pano {
  width: 50%;
  height: 100%;
  float: left;
}
#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869, lng: -122.255},
        pov: {
          heading: 270,
          pitch: 0
        },
        visible: true
  });

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}

Ver o exemplo (streetview-events.html).

Controles do Street View

Quando o StreetViewPanorama é exibido, diversos controles aparecem no panorama por padrão. Ative ou desative esses controles definindo os campos adequados em StreetViewPanoramaOptions como true ou false:

  • Um panControl oferece uma forma de girar o panorama. Esse controle é exibido por padrão como um controle padrão integrado de bússola e deslocamento. Altere a posição do controle informando PanControlOptions no campo panControlOptions.
  • Um zoomControl oferece uma forma de usar o zoom na imagem. Esse controle é exibido por padrão perto do canto inferior direito do panorama. Altere a aparência do controle informando ZoomControlOptions no campo zoomControlOptions.
  • Um addressControl fornece uma sobreposição textual indicando o endereço da localização associada e oferece um vínculo para abrir a localização no Google Maps. Altere a aparência do controle informando StreetViewAddressControlOptions no campo addressControlOptions.
  • Um fullscreenControl oferece a opção de abrir o Street View em modo de tela cheia. Altere a aparência do controle informando FullscreenControlOptions no campo fullscreenControlOptions.
  • Um motionTrackingControl oferece a opção de ativar ou desativar o rastreamento de movimento em dispositivos móveis. Esse controle aparece apenas em dispositivos compatíveis com eventos de orientação de dispositivo. Por padrão, o controle é exibido no canto inferior esquerdo do panorama. Altere a posição do controle informando MotionTrackingControlOptions. Para obter mais informações, consulte a seção sobre rastreamento de movimento.
  • Um linksControl fornece setas de orientação na imagem para acessar imagens de panorama adjacentes.
  • Um controle Close permite que o usuário feche o visualizador do Street View. Ative ou desative o controle Close definindo enableCloseButton como true ou false.

O exemplo a seguir altera os controles exibidos no Street View associado e remove os links da visualização:

Visualize esse exemplo em tela cheia.

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}

Ver o exemplo (streetview-controls.html).

Acesso direto aos dados do Street View

É possível determinar programaticamente a disponibilidade de dados do Street View ou de informações de retorno sobre determinados panoramas sem exigir a manipulação direta de um mapa/panorama. Para isso, use o objeto StreetViewService, que oferece uma interface para os dados armazenados no serviço Street View do Google.

Solicitações do serviço Street View

O acesso ao serviço Street View é assíncrono, pois a Google Maps API precisa chamar um servidor externo. Por isso, passe um método de retorno de chamada a ser executado na conclusão da solicitação. Esse método de retorno de chamada processa o resultado.

Há dois tipos de solicitação para o StreetViewService:

  • Solicitação com StreetViewPanoRequest: retorna dados do panorama para o ID de referência informado, que identifica unicamente o panorama. Observe que esses IDs de referência são estáveis apenas durante a vida útil das imagens desse panorama.
  • Solicitação com StreetViewLocationRequest: pesquisa dados de panorama em uma determinada área para a LatLng informada.

Respostas do serviço Street View

A função getPanorama() precisa de uma função de retorno de chamada a ser executada no retorno do resultado do serviço Street View. Essa função de retorno de chamada retorna um conjunto de dados de panorama em um objeto StreetViewPanoramaData e um código StreetViewStatus indicando o status da solicitação, nessa ordem.

Uma especificação de objeto StreetViewPanoramaData contém metadados sobre um panorama do Street View com o seguinte formato:

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

Observe que esse objeto de dados não é um objeto StreetViewPanorama. Para criar um objeto Street View usando esses dados, crie um StreetViewPanorama e chame setPano() passando o ID observado no campo location.pano.

O código de status pode retornar um dos seguintes valores:

  • OK indica que o serviço encontrou um panorama correspondente.
  • ZERO_RESULTS indica que o serviço não conseguiu encontrar um panorama correspondente aos critérios passados.
  • UNKNOWN_ERROR indica que não foi possível processar uma solicitação do Street View, embora o motivo exato seja desconhecido.

O código a seguir cria um StreetViewService que responde a cliques do usuário em um mapa criando marcadores que, quando clicados, exibem um StreetViewPanorama dessa localização. O código usa o conteúdo de StreetViewPanoramaData retornado do serviço.

/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var sv = new google.maps.StreetViewService();

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

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

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({location: berkeley, radius: 50}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

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

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

    marker.addListener('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);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var sv = new google.maps.StreetViewService();

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

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

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({location: berkeley, radius: 50}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

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

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

    marker.addListener('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);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}

Ver o exemplo (streetview-service.html).

Fornecer panoramas personalizados do Street View

A Google Maps JavaScript API permite a exibição de panoramas personalizados no objeto StreetViewPanorama. Use panoramas personalizados para exibir o interior de edifícios, visualizações de localizações com paisagens ou qualquer outra coisa que você possa imaginar. É possível até vincular esses panoramas personalizados aos panoramas do Street View existentes no Google.

A definição de um conjunto de imagens de panorama personalizadas envolve as seguintes etapas:

  • Crie uma imagem panorâmica básica para cada panorama personalizado. Essa imagem básica deve ser a imagem de resolução mais alta a ser usada para exibir imagens com zoom.
  • (Opcional, mas recomendado) Crie um conjunto de blocos panorâmicos em níveis de zoom diferentes a partir da imagem básica.
  • Crie links entre os panoramas personalizados.
  • (Opcional) Designe panoramas de "entrada" entre as imagens de Street View existentes no Google e personalize links nos dois sentidos entre o conjunto personalizado e o conjunto padrão.
  • Defina metadados para cada imagem de panorama em um objeto StreetViewPanoramaData.
  • Implemente um método que determina os dados e as imagens do panorama personalizado e designe esse método como o manipulador personalizado no objeto StreetViewPanorama.

As seções a seguir explicam o processo.

Criar panoramas personalizados

Cada panorama do Street View é uma imagem ou um conjunto de imagens que oferece uma visualização de 360 graus completa de uma única localização. O objeto StreetViewPanorama usa imagens compatíveis com a projeção equirretangular (Plate Carrée). Essa projeção contém 360 graus de visualização horizontal (uma volta completa) e 180 graus de visualização vertical (de cima para baixo). Esses campos de visão resultam em uma imagem com proporção de 2:1. Um panorama com uma volta completa é mostrado a seguir.

Geralmente, as imagens de panorama são obtidas tirando várias fotos da mesma posição e juntando-as usando software de panorama. (Consulte Comparação entre aplicativos de montagem de fotos para obter mais informações.) Essas imagens devem compartilhar uma única localização de "câmera" de onde todas as imagens do panorama foram fotografadas. O panorama de 360 graus resultante pode definir a projeção em uma esfera com a imagem cobrindo a superfície bidimensional da esfera.

Para dividir a imagem em blocos retilíneos e fornecer imagens baseadas em coordenadas de bloco calculadas, é vantajoso tratar o panorama como uma esfera com um sistema de coordenadas retilíneas.

Criar blocos de panoramas personalizados

O Street View também permite níveis diferentes de detalhes de imagem por meio do controle de zoom, que permite aumentar e diminuir o zoom da visualização padrão. Geralmente, o Street View fornece cinco níveis de resolução de zoom para qualquer imagem de panorama. Se você usasse uma única imagem de panorama para exibir todos os níveis de zoom, essa imagem seria necessariamente muito grande, retardando o aplicativo, ou teria uma resolução tão pequena nos níveis mais altos de zoom que exibiria uma imagem serrilhada de baixa qualidade. Felizmente, é possível usar um padrão de projeto semelhante ao usado para exibir blocos de mapas do Google Maps em diferentes níveis de zoom para fornecer imagens com resolução adequada para cada nível de zoom de um panorama.

Por padrão, o primeiro carregamento de um StreetViewPanorama exibe uma imagem com 25% (90 graus de arco) da abrangência horizontal do panorama no nível de zoom 1. Essa visualização corresponde aproximadamente ao campo de visão humano normal. Reduzir o zoom dessa visualização fornece essencialmente um arco mais amplo e aumentar o zoom estreita o campo de visão para um arco menor. O StreetViewPanorama calcula automaticamente o campo de visão adequado para o nível de zoom escolhido e separa as imagens mais apropriadas para essa resolução, selecionando um conjunto de blocos que corresponde aproximadamente às dimensões do campo de visão horizontal. Os campos de visão a seguir estão relacionados a níveis de zoom do Street View:

Nível de zoom do Street View Campo de visão (graus)
0 180
1 (padrão) 90
2 45
3 22,5
4 11,25

Observe que o tamanho da imagem mostrada no Street View depende totalmente do tamanho da tela (largura) do contêiner do Street View. Para contêineres mais largos, o serviço continua fornecendo o mesmo campo de visão para qualquer nível de zoom, embora possa escolher blocos mais adequados para essa resolução.

Como cada panorama consiste em uma projeção equirretangular, a criação de blocos de panorama é relativamente fácil. Como a projeção fornece uma imagem com proporção de 2:1, é mais fácil usar blocos com essa proporção, embora blocos quadrados possam oferecer melhor desempenho em mapas quadrados (pois o campo de visão é quadrado).

Para blocos 2:1, uma única imagem abrangendo todo o panorama representa o "mundo" completo do panorama (a imagem básica) no nível de zoom 0. Cada nível de zoom maior oferece 4 blocos de zoomLevel. (Por exemplo, no nível de zoom 2, o panorama inteiro consiste em 16 blocos.) Observação: os níveis de zoom nos blocos do Street View não correspondem diretamente aos níveis de zoom fornecidos pelo controle Street View, que escolhem um campo de visão (FoV) de onde os blocos apropriados são selecionados.

Geralmente, os blocos de imagem recebem nomes para permitir que sejam selecionados programaticamente. Esse esquema de nomenclatura é discutido abaixo em Processar solicitações de panoramas personalizados.

Processar solicitações de panoramas personalizados

O uso de panoramas personalizados é indicado registrando um método de panorama personalizado no campo panoProvider de StreetViewPanoramaOptions ou chamando explicitamente StreetViewPanorama.registerPanoProvider(). O método de provedor de panoramas é uma função que retorna um objeto StreetViewPanoramaData e tem a seguinte assinatura:

Function(pano,zoom,tileX,tileY):StreetViewPanoramaData

Um StreetViewPanoramaData é um objeto com o seguinte formato:

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

Para exibir um panorama personalizado, basta definir a propriedade pano de StreetViewPanorama como um valor personalizado, definir o panoProvider e processar esse valor pano personalizado no método de provedor de panoramas personalizados, construindo e retornando um objeto StreetViewPanoramaData.

Observação: se quiser exibir panoramas personalizados, não defina diretamente uma position no StreetViewPanorama, pois essa ação instrui o serviço Street View a solicitar as imagens padrão do Street View próximas a essa localização. Em vez disso, defina essa posição no campo location.latLng do StreetViewPanoramaData personalizado.

O exemplo a seguir exibe um panorama personalizado do escritório da Google em Sidnei. Observe que nesse caso não usamos nenhum mapa ou imagem padrão do Street View:

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'reception') {
    return {
      location: {
        pano: 'reception',
        description: 'Google Sydney - Reception'
      },
      links: [],
      // The text for the copyright control.
      copyright: 'Imagery (c) 2010 Google',
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'reception') {
    return {
      location: {
        pano: 'reception',
        description: 'Google Sydney - Reception'
      },
      links: [],
      // The text for the copyright control.
      copyright: 'Imagery (c) 2010 Google',
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}

Ver o exemplo (streetview-custom-simple.html).

Observe que retornamos apenas uma imagem no exemplo anterior e que, aumentando o zoom dessa imagem, o resultado tem baixa resolução. Em vez disso, podemos oferecer um conjunto de blocos criando imagens de blocos e modificando panoProvider para retornar o bloco apropriado considerando o ID de panorama, o nível de zoom e a coordenada do bloco do panorama informados.

Como a seleção de imagens depende desses valores passados, é útil atribuir às imagens nomes que possam ser selecionados programaticamente considerando esses valores passados, como pano_zoom_tileX_tileY.png.

O exemplo a seguir foi levemente incrementado para incluir dois níveis de zoom. Além das setas de navegação padrão do Street View, o exemplo também adiciona outra seta à imagem, apontando para a Google em Sidnei e com links para as imagens personalizadas:

var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: 'reception',  // The ID for this custom panorama.
      description: 'Google Sydney - Reception',
      latLng: new google.maps.LatLng(-33.86684, 151.19583)
    },
    links: [{
      heading: 195,
      description: 'Exit',
      pano: outsideGoogle.location.pano
    }],
    copyright: 'Imagery (c) 2010 Google',
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function(pano, zoom, tileX, tileY) {
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
            'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
      }
    }
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener('links_changed', function() {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: 'Google Sydney',
        heading: 25,
        pano: 'reception'
      });
    }
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}
<div id="street-view"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#street-view {
  height: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: 'reception',  // The ID for this custom panorama.
      description: 'Google Sydney - Reception',
      latLng: new google.maps.LatLng(-33.86684, 151.19583)
    },
    links: [{
      heading: 195,
      description: 'Exit',
      pano: outsideGoogle.location.pano
    }],
    copyright: 'Imagery (c) 2010 Google',
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function(pano, zoom, tileX, tileY) {
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
            'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
      }
    }
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener('links_changed', function() {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: 'Google Sydney',
        heading: 25,
        pano: 'reception'
      });
    }
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}

Ver o exemplo (streetview-custom-tiles.html).

Enviar comentários sobre…

Google Maps JavaScript API
Google Maps JavaScript API
Precisa de ajuda? Acesse nossa página de suporte.