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

<br />

3D Maps in Maps JavaScript helps you create immersive, 3D map experiences. It provides
tools for customizing map styling, improving accessibility, and enhancing
usability, enabling the development of engaging and interactive applications.

Here's an example of what you can do with 3D Maps in the Maps JavaScript API:


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

## Why use 3D Maps in Maps JavaScript

3D Maps in Maps JavaScript provides the
[`Map3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement)
([`<gmp-map-3d>`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement))
class in the `maps3d` library so you can use Google's 3D imagery across your
applications. 3D maps provide a built-in 3D rendering experience, letting you
incorporate or experiment with 3D real-world environments, city views, and
landmark tours.

Use 3D
[`<gmp-map-3d>`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement)
([`Map3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement)
in the `maps3d` library) for 3D terrain, camera tilt, heading, and range
flyovers, extruded 3D buildings, and 3D objects such as
[`Marker3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DElement)
([`<gmp-marker-3d>`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DElement)).
For flat 2D road maps, standard 2D
[`AdvancedMarkerElement`](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#AdvancedMarkerElement)
pins, and 2D vector styling, use 2D
[`<gmp-map>`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapElement)
([`MapElement`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapElement) or
[`google.maps.Map`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#Map) in the
`maps` library).

## What can you do with 3D Maps in Maps JavaScript?

- **Create real-world map experiences** : Render photorealistic 3D aerial imagery of cities, terrain, and landmarks in [`SATELLITE`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#MapMode.SATELLITE) or [`HYBRID`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#MapMode.HYBRID) mode (which overlays basemap labels on satellite imagery), or display a styled 3D basemap in [`ROADMAP`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#MapMode.ROADMAP) mode using the [`mode`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.mode) property. For more information, see [Change the map mode](https://developers.google.com/maps/documentation/javascript/3d/map-modes.md.txt).
- **Customize the map's style** :
  - **3D cloud-based map styling** : Control the visibility and styling of basemap points of interest (POIs) and roads. For more information, see [Customize 3D maps](https://developers.google.com/maps/documentation/javascript/3d/customize-maps.md.txt).
  - **Custom markers, popovers, polylines, and polygons** : Identify locations and draw 3D routes or boundaries on the map using [`MarkerElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#MarkerElement), [`Marker3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DElement), [`Marker3DInteractiveElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DInteractiveElement), [`PopoverElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#PopoverElement), [`Polyline3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polyline3DElement), and [`Polygon3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polygon3DElement). For more information, see [Markers](https://developers.google.com/maps/documentation/javascript/3d/marker-overview.md.txt), [Popovers](https://developers.google.com/maps/documentation/javascript/3d/popovers.md.txt), and [Shapes and lines](https://developers.google.com/maps/documentation/javascript/3d/shapes-lines.md.txt).
  - **3D models and glTF assets** : Add custom PBR glTF 3D models of buildings, landmarks, or objects at real-world coordinates using [`Model3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Model3DElement). For more information, see [Models](https://developers.google.com/maps/documentation/javascript/3d/models.md.txt).
- **Build immersive maps** :
  - **Preset camera paths** : Guide users through your 3D map with predefined camera flyovers and orbital animations using [`flyCameraTo`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.flyCameraTo) and [`flyCameraAround`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.flyCameraAround). For more information, see [Animate camera paths](https://developers.google.com/maps/documentation/javascript/3d/animate-camera.md.txt).
  - **Control user interaction** : Customize the controls and camera movement available to your users. For more information, see [3D map controls and exploration](https://developers.google.com/maps/documentation/javascript/3d/map-controls.md.txt), [Restrict camera view and bounds](https://developers.google.com/maps/documentation/javascript/3d/interaction.md.txt), and [Control the position of the camera](https://developers.google.com/maps/documentation/javascript/3d/camera-position.md.txt).

## Quick example

To load the `maps3d` library and render a
[`<gmp-map-3d>`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement)
element with
[`mode="HYBRID"`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.mode),
[`center`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.center)
(`lat,lng,altitude`),
[`range`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.range),
[`tilt`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.tilt),
and
[`heading`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement.heading),
use the following snippet:

```html
<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>
```

Replace <var translate="no">YOUR_API_KEY</var> with your Google Maps Platform API key.

## How to use 3D Maps in Maps JavaScript

|---|---|---|
| 1 | **Get set up** | Start with [Set up the JavaScript API](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt) and complete the setup instructions that follow. |
| 2 | **Understand how the Maps JavaScript API bills** | For information, see [Usage and billing](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt). |
| 3 | **Create a map** | For more information, see [Get started](https://developers.google.com/maps/documentation/javascript/3d/get-started.md.txt). |

## Coverage

Photorealistic 3D building and landmark meshes are available in selected
metropolitan areas across supported countries and regions. In regions without 3D
mesh coverage (such as India),
[`<gmp-map-3d>`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Map3DElement)
renders 2D satellite or roadmap imagery draped over 3D terrain elevation without
extruded 3D buildings. To showcase a landmark in an area without 3D mesh
coverage, you can place a custom glTF 3D model at its coordinates using
[`Model3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Model3DElement),
or use a 2D
[`<gmp-map>`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapElement). For
country-by-country availability (under the **Maps JavaScript 3D** column), see
[Google Maps Platform Coverage Details](https://developers.google.com/maps/coverage.md.txt).

## Next steps

- Check out the [Get
  started](https://developers.google.com/maps/documentation/javascript/3d/get-started) guide to build a "Hello, World!" 3D map.
- Try the intro [codelab](https://developers.google.com/codelabs/maps-platform/maps-platform-101-3d-maps-js) to explore how to add features to the map.
- Expand your knowledge of markers and animation in the next [codelab](https://developers.google.com/codelabs/maps-platform/maps-platform-3d-maps-js-markers#0).
- Browse Google's collection of [samples](https://developers.google.com/maps/documentation/javascript/examples/3d/simple-map.md.txt) to find one that works for your use case.