Começar

Selecione a plataforma: Android iOS JavaScript

Neste tutorial, você vai criar seu primeiro aplicativo JavaScript usando o 3D Maps na API Maps JavaScript: uma janela básica que mostra uma vista aérea da Ponte Golden Gate com as 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 o 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, então não é necessário instalar nenhum software adicional.

  1. Abra um editor de texto de sua preferência.
  2. Crie um arquivo e salve-o com uma 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=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Executar 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. 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 "Abrir com".
  3. O mapa vai aparecer na janela do navegador.

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

Próximas etapas

  • Crie experiências de mapa 3D mais complicadas usando os exemplos existentes do Google.
  • Descubra todo o potencial da API 3D Maps na API Maps JavaScript lendo a documentação de referência.