Introduction

Select platform: Android iOS JavaScript

3D Maps in Maps JavaScript is a product within the Maps JavaScript API that allows businesses and developers to 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

The 3D Maps in Maps JavaScript class lets you use Google's 3D imagery across your applications. 3D maps provides a built-in 3D rendering experience, allowing you to quickly and seamlessly incorporate or experiment with 3D Maps.

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

  • Create real-world map experiences: Bring locations to life with photorealistic 3D environments, offering unprecedented scale and detail.
  • Customize the map's style:
    • 3D cloud-based map styling: Control the density of basemap points of and road styling.
    • Custom markers, popovers, and styled polylines: Customize markers to identify locations on the map.
    • 3D models and gLTF assets: Add detailed 3D models of buildings, landmarks, or custom objects.
  • Build immersive maps
    • Preset camera paths: Guide users through your 3D map with predefined camera animations, transitioning between points of interest.
    • Control user interaction: Customize the controls and camera movement available to your users.

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

Review the 3D Maps in Maps JavaScript's supported coverage.

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.