Como começar

Neste tutorial, você vai criar seu primeiro programa em 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.

Após concluir o tutorial, você verá o seguinte mapa no seu ambiente de desenvolvimento:

Configure seu ambiente

Antes de começar a escrever o código, configure um ambiente que execute o JavaScript. Para este tutorial, você usará um navegador da Web como ambiente. Todos os navegadores da Web modernos têm suporte integrado para JavaScript, ou seja, você não precisa instalar nenhum software adicional.

  1. Abra um editor de texto de sua escolha.
  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ê vai 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 ver o resultado, siga estas etapas:

  1. Salve o arquivo HTML que você criou.
  2. Abra o arquivo em um navegador da Web. É possível clicar duas vezes no arquivo, arrastá-lo para uma janela do navegador ou clicar com o botão direito do mouse e usar a opção "Abrir com".
  3. Você verá o mapa na janela do navegador.

Parabéns! Você acabou de criar um programa usando mapas fotorrealistas em 3D da API Maps JavaScript do Google.

Próximas etapas