Começar

Selecione a plataforma: Android iOS JavaScript

Neste tutorial, você vai aprender a criar seu primeiro aplicativo JavaScript usando mapas 3D na API Maps JavaScript: uma janela básica que mostra uma visão aérea da Ponte Golden Gate com Marin Headlands ao fundo.

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

Configurar o ambiente

Antes de começar a escrever código, configure 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 preferência.
  2. Crie um arquivo e salve com a extensão .html (por exemplo, hello-p3djs.html).

Escrever uma página HTML

Para começar, crie uma página da Web com uma estrutura HTML básica:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

Adicionar JavaScript

Em seguida, adicione um elemento HTML personalizado 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 da câmera inicial.
  • script contém a chamada para carregar a API Maps JavaScript. Substitua YOUR_KEY pela sua chave de API.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Execute o aplicativo

Para executar o aplicativo 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. Para isso, clique duas vezes nele, arraste-o para uma janela do navegador ou clique com o botão direito do mouse e use "Abrir com".
  3. O mapa vai aparecer na janela do navegador.

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

Próximas etapas

  • Crie experiências de mapa 3D mais complexas usando os exemplos atuais do Google.
  • Leia a documentação de referência para descobrir todo o potencial dos mapas 3D na API Maps JavaScript.