Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Get started

Select platform:AndroidiOSJavaScript

In this tutorial, you'll guide yourself through creating your first JavaScriptapplication using 3D Maps in Maps #"Set up your environment" tabindex="-1">Set up your environment

Before you begin writing code, you must set up an environment that runsJavaScript. For this tutorial, you'll use a web browser as your environment. Allmodern web browsers have built-in support for JavaScript, so you don't need toinstall 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 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 twoelements:

  • gmp-map-3d contains the parameters used for initializing the startingcamera position and view.
  • script contains the call to load the Maps JavaScript API. Be sure toreplaceYOUR_KEY with your API key.
<!DOCTYPE html><html>  <head>    <title>Hello 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, dragit 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's3D Maps in Maps JavaScript API.

Next steps

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

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

Last updated 2025-10-31 UTC.