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 vista aérea da Ponte Golden Gate com as colinas de 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 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 novo 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 iniciais da câmera.
  • 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>

Execute o aplicativo

Para executar o aplicativo e ver a saída, siga estas etapas:

  1. Salve o arquivo HTML que você criou.
  2. Abra o arquivo em um navegador da Web (clique duas vezes no arquivo, 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 criar um aplicativo usando os mapas 3D do Google na API Maps JavaScript.

Próximas etapas