Overview

Select platform: Android iOS JavaScript

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:

Why use 3D Maps in Maps JavaScript

3D Maps in Maps JavaScript provides the Map3DElement (<gmp-map-3d>) 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> (Map3DElement in the maps3d library) for 3D terrain, camera tilt, heading, and range flyovers, extruded 3D buildings, and 3D objects such as Marker3DElement (<gmp-marker-3d>). For flat 2D road maps, standard 2D AdvancedMarkerElement pins, and 2D vector styling, use 2D <gmp-map> (MapElement or google.maps.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 or HYBRID mode (which overlays basemap labels on satellite imagery), or display a styled 3D basemap in ROADMAP mode using the mode property. For more information, see Change the map mode.
• 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.
  • Custom markers, popovers, polylines, and polygons: Identify locations and draw 3D routes or boundaries on the map using MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement, and Polygon3DElement. For more information, see Markers, Popovers, and Shapes and lines.
  • 3D models and glTF assets: Add custom PBR glTF 3D models of buildings, landmarks, or objects at real-world coordinates using Model3DElement. For more information, see Models.
• Build immersive maps:
  • Preset camera paths: Guide users through your 3D map with predefined camera flyovers and orbital animations using flyCameraTo and flyCameraAround. For more information, see Animate camera paths.
  • Control user interaction: Customize the controls and camera movement available to your users. For more information, see 3D map controls and exploration, Restrict camera view and bounds, and Control the position of the camera.

Quick example

To load the maps3d library and render a <gmp-map-3d> element with mode="HYBRID", center (lat,lng,altitude), range, tilt, and heading, use the following snippet:

<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 YOUR_API_KEY 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 and complete the setup instructions that follow.
2	Understand how the Maps JavaScript API bills	For information, see Usage and billing.
3	Create a map	For more information, see Get started.

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> 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, or use a 2D <gmp-map>. For country-by-country availability (under the Maps JavaScript 3D column), see Google Maps Platform Coverage Details.

Next steps

• Check out the Get started guide to build a "Hello, World!" 3D map.
• Try the intro codelab to explore how to add features to the map.
• Expand your knowledge of markers and animation in the next codelab.
• Browse Google's collection of samples to find one that works for your use case.