Começar

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

Depois de concluir o tutorial, você verá o seguinte mapa no ambiente de desenvolvimento:

Configurar o ambiente

Antes de começar a escrever código, é necessário configurar 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 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ê 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, você vai adicionar 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" range="2000" tilt="75" heading="330"></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 criar um programa usando mapas fotorrealistas em 3D da API Maps JavaScript do Google.

Próximas etapas