Select platform: [Android](https://developers.google.com/maps/documentation/maps-3d/android-sdk/add-a-3d-map.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/add-a-3d-map.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/3d/get-started.md.txt "View this page for the JavaScript platform docs.")

<br />

In this tutorial, you'll guide yourself through creating your first JavaScript
application using 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:


<iframe src="https://maps-docs-team.web.app/samples/3d-simple-map-declarative/dist/" allow="fullscreen; "></iframe>

## 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:

```html
<html>
  <head>
      <title>Map</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:

- `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.


```html
<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>
```

<br />

## 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
3D Maps in Maps JavaScript API.

## Next steps

- Build more complicated 3D map experiences using Google's existing [samples](https://developers.google.com/maps/documentation/javascript/examples/3d/simple-map.md.txt).
- Discover the full potential of the 3D Maps in Maps JavaScript API by reading the [reference documentation](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt).