A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.google.com/maps/documentation/javascript/3d/get-started below:

Get started | Maps JavaScript API

Get started

Stay organized with collections Save and categorize content based on your preferences.

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 Maps Platform Service Specific Terms. For more information, see the launch stage descriptions.

In this tutorial, you'll guide yourself through creating your first JavaScript application using Photorealistic 3D Maps in Maps JavaScript: a basic window that displays an overhead view of the Golden Gate Bridge with the Marin Headlands in the background.

Upon completing the tutorial, you should see the following map in your development environment:

Set up your environment

Before you begin writing code, you must set up an environment that runs JavaScript. For this tutorial, you'll use a web browser as your environment. All modern web browsers have built-in support for JavaScript, so you don't need to install any additional software.

  1. Open a text editor of your choosing.
  2. Create a new file and save it with an .html extension (e.g., hello-p3djs.html).
Write an HTML page

To start, you'll create a web page with a basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>
Add JavaScript

Next, you'll add a custom HTML element to load the map. The code contains two elements:

<!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 mode="hybrid" 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=beta&libraries=maps3d"></script>
  </body>
</html>
Run the application

To run the application and see the output, follow these steps:

  1. Save the HTML file you created.
  2. 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").
  3. You should see the map in your browser window.

Congratulations! You've just written an application using Google's Photorealistic 3D Maps in Maps JavaScript API.

Next steps

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-14 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4