Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Neste tutorial, você vai criar seu primeiro aplicativo JavaScript usando mapas fotorrealistas em 3D no Maps JavaScript: uma janela básica 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:
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. Assim, você não precisa instalar nenhum software adicional.
Abra um editor de texto de sua preferência.
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ê adicionará 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.
Para executar o aplicativo e conferir a saída, siga estas etapas:
Salve o arquivo HTML criado.
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").
Você verá o mapa na janela do navegador.
Parabéns! Você acabou de criar um aplicativo usando os mapas fotorrealistas em 3D do Google na API Maps JavaScript.
Próximas etapas
Crie experiências de mapas 3D mais complicadas usando amostras do Google.
Leia a documentação de referência para descobrir todo o potencial dos mapas fotorrealistas em 3D na API Maps JavaScript.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-04-29 UTC."],[],[],null,["\u003cbr /\u003e\n\n| This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google\n| Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage\n| descriptions](/maps/launch-stages).\n\n\u003cbr /\u003e\n\nSelect platform: [Android](/maps/documentation/maps-3d/android-sdk/add-a-3d-map \"View this page for the Android platform docs.\") [iOS](/maps/documentation/maps-3d/ios-sdk/add-a-3d-map \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/3d/get-started \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nIn this tutorial, you'll guide yourself through creating your first JavaScript\napplication using Photorealistic 3D Maps in Maps JavaScript: a basic window that displays\nan overhead view of the Golden Gate Bridge with the Marin Headlands in the\nbackground.\n\nUpon completing the tutorial, you should see the following map in your\ndevelopment environment:\n\nSet up your environment\n\nBefore you begin writing code, you must set up an environment that runs\nJavaScript. For this tutorial, you'll use a web browser as your environment. All\nmodern web browsers have built-in support for JavaScript, so you don't need to\ninstall any additional software.\n\n1. Open a text editor of your choosing.\n2. Create a new file and save it with an `.html` extension (e.g., `hello-p3djs.html`).\n\nWrite an HTML page\n\nTo start, you'll create a web page with a basic HTML structure: \n\n \u003c!DOCTYPE html\u003e\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eHello Photorealistic 3D Maps in Maps JavaScript\u003c/title\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c!-- Your JavaScript code will go here --\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nAdd JavaScript\n\nNext, you'll add a custom HTML element to load the map. The code contains two\nelements:\n\n- `gmp-map-3d` contains the parameters used for initializing the starting camera position and view.\n- `script` contains the call to load the Maps JavaScript API. Be sure to replace `YOUR_KEY` with your API key.\n\n \u003c!DOCTYPE html\u003e\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eHello Photorealistic 3D Maps in Maps JavaScript\u003c/title\u003e\n\n \u003cstyle\u003e\n html,\n body {\n height:100%;\n margin: 0;\n padding: 0;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cgmp-map-3d mode=\"hybrid\" center=\"37.841157, -122.551679\" range=\"2000\" tilt=\"75\" heading=\"330\"\u003e\u003c/gmp-map-3d\u003e\n \u003cscript async src=\"https://maps.googleapis.com/maps/api/js?key=\u003cYOUR_KEY\u003e&v=beta&libraries=maps3d\"\u003e\u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nRun the application\n\nTo run the application and see the output, follow these steps:\n\n1. Save the HTML file you created.\n2. Open the file in a web browser (you can double-click the file, drag it into a browser window, or right-click and use \"Open with\").\n3. You should see the map in your browser window.\n\nCongratulations! You've just written an application using Google's\nPhotorealistic 3D Maps in Maps JavaScript API.\n\nNext steps\n\n- Build more complicated 3D map experiences using Google's existing [samples](/maps/documentation/javascript/examples/3d/simple-map).\n- Discover the full potential of the Photorealistic 3D Maps in Maps JavaScript API by reading the [reference documentation](/maps/documentation/javascript/reference/3d-map)."]]
