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 seu ambiente de desenvolvimento:

Configurar o ambiente

Antes de começar a programar, 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. Não se esqueça de substituir 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 criado.
  2. Abra o arquivo em um navegador da Web. Para isso, clique duas vezes nele, arraste 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 a API Maps JavaScript com mapas 3D do Google.

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.