Primeiros passos

Neste tutorial, você vai criar seu primeiro programa JavaScript usando mapas fotorrealistas em 3D no Maps JavaScript: uma janela simples que mostra uma vista aérea da ponte Golden Gate com o Marin Headlands em segundo plano.

Ao concluir o tutorial, você verá o mapa a seguir no seu ambiente de desenvolvimento:

Configure seu 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. Assim, você não precisa 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, você 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, adicione 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" tilt="67.5"></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 criado.
  2. Abra o arquivo em um navegador da Web (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. Você verá o mapa na janela do navegador.

Parabéns! Você acabou de escrever um programa usando a API Maps JavaScript do Google, com mapas fotorrealistas em 3D.

Próximas etapas