Começar

Neste tutorial, você vai aprender a criar seu primeiro programa em JavaScript usando mapas 3D fotorrealistas na API Maps JavaScript: uma janela simples que mostra uma vista aérea da ponte Golden Gate com as colinas Marin Headlands ao fundo.

Depois de concluir o tutorial, você verá o seguinte mapa no ambiente de desenvolvimento:

Configurar o ambiente

Antes de começar a escrever código, é necessário configurar um ambiente que execute JavaScript. Neste tutorial, você vai usar um navegador da Web como ambiente. Todos os navegadores da Web modernos têm suporte integrado para JavaScript. Portanto, não é necessário instalar nenhum software adicional.

  1. Abra um editor de texto de sua escolha.
  2. Crie um novo arquivo e salve-o com uma extensão .html (por exemplo, hello-p3djs.html).

Escrever uma página HTML

Para começar, você vai criar uma página da Web com uma estrutura HTML básica:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

Adicionar JavaScript

Em seguida, você vai adicionar o código JavaScript para carregar o mapa. O código contém dois elementos:

  • gmp-map-3d contém os parâmetros usados para inicializar a posição e a visualização iniciais da câmera.
  • script contém a chamada para carregar a API Maps JavaScript. Substitua YOUR_KEY pela sua chave de API.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

Executar o programa

Para executar o programa e conferir a saída, siga estas etapas:

  1. Salve o arquivo HTML que você criou.
  2. Abra o arquivo em um navegador da Web. Você pode clicar duas vezes no arquivo, arrastá-lo para uma janela do navegador ou clicar com o botão direito do mouse e usar a opção "Abrir com".
  3. O mapa vai aparecer na janela do navegador.

Parabéns! Você acabou de escrever um programa usando os mapas 3D fotorrealistas da API Maps JavaScript do Google.

Próximas etapas

  • Crie experiências de mapas 3D mais complexas usando as amostras atuais do Google.
  • Descubra todo o potencial dos mapas 3D na API Maps JavaScript lendo a documentação de referência.