Getting started

In this tutorial, you'll guide yourself through creating your first JavaScript program using Photorealistic 3D Maps in Maps JavaScript: a simple 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 JavaScript code to load the map. The code contains two elements:

  • gmp-map-3d contains the parameters used for initializing the starting camera position and view.
  • script contains the call to load the Maps JavaScript API. Be sure to replace YOUR_KEY with your API key.
<!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>

Run the program

To run the program 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 a program using Google's Maps JavaScript API photorealistic 3D maps.

Next steps

  • Build more complicated 3D map experiences using Google's existing samples.
  • Discover the full potential of 3D Maps in Maps JavaScript API by reading the reference documentation.