Skip to content
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Evolving 3D Maps: New features now available for streamlining 3D development and building engaging experiences
Haylee Conradi
Product Manager, Google Maps Platform
Sep 25, 2024
Try Google Maps Platform
Unlock access to real-world data and insights with a monthly $200 Google Maps Platform credit.
Get started

Earlier this year at I/O, we announced the launch of Photorealistic 3D Maps in the Maps JavaScript API. Since then, we've been inspired by the ways you want to use 3D Maps, and we love hearing your feedback. Today, we’re excited to announce a significant update to Experimental 3D Maps to make it even easier to build immersive and engaging map experiences. With this new suite of features for 3D Maps in Javascript, developers have more tools to streamline 3D development, offer intuitive and engaging experiences for users, and further customize their real world maps experience.

What's new in 3D Maps JavaScript

Enable users to explore more intuitively

We know smooth and intuitive navigation is crucial for a great user experience, especially when exploring the world in 3D. That’s why we've added intuitive map exploration controls directly into the 3D interface. Now users can more easily pan, zoom, and rotate 3D maps and seamlessly explore, all without you having to write any complex code. This streamlines user onboarding and lets you focus on building the core of your application.

Exploration controls featuring Berlin, Germany

Exploration controls featuring Berlin, Germany

Annotate your 3D experience with markers you design 

In addition to polygons and polylines, you can now add more visual elements to your 3D map with customizable markers that are fully integrated into the 3D scene for a more immersive representation. Marker customization options give you control over your brand’s look and feel, ensure visual clarity within the 3D map, and allow for user interaction and engagement.

  • Change the color of the default pin, and replace the pin icon with your own image or symbol

  • Visually anchor the marker with an extruded line

  • Format collision and occlusion behavior for optimal user view

  • Trigger specific actions with click events, such as displaying custom UI elements or initiating new camera actions

Custom markers in Sydney, Australia

Custom markers highlight specific points of interest in Sydney, Australia

Create dynamic transitions with preset camera paths

We've simplified the process of creating dynamic and cinematic mapping experiences by introducing preset camera paths with "fly to" and "fly around" functions. These ready-to-use animation options remove the need for complex camera scripting, allowing you to easily create guided tours, orbit specific points of interest, or add seamless transitions to your map, saving you valuable development time and effort.

Combining fly-to and fly-around camera functions for seamless map animations

Create more visually appealing maps with 3D Models

Showcase custom 3D elements and visualize 3D geospatial content with our newly added support for 3D models. Now, you can render gITF assets directly into your 3D map.

Innsbruck 3D Model

A custom 3D airplane simulates an arrival to Innsbruck, Austria
Note: Airplane by Poly by Google [CC-BY] via Poly Pizza

Provide detailed location information with POI Events 

3D Maps integrates with Google Maps Platform’s Places API, which includes over 250 million businesses and points of interest (POIs) and is updated daily. With expanded click interactions, you can now enable event listeners for basemap POIs and labels. You can leverage this event to integrate other Google Maps Platform APIs like Place Details to offer more in-depth location information, reviews, or photos directly within your 3D map. 

Now let’s see how these features come together and elevate an experience with 3D Maps in JavaScript.

Interactive Map: Virtually explore Boston’s iconic Freedom Trail with this interactive 3D map created using Photorealistic 3D Maps in Maps JavaScript API

Getting started, with more to come

These new features, available in Photorealistic 3D Maps in the Maps JavaScript API, are designed to make it even easier for you to create immersive and engaging web experiences. If you’re new to 3D Maps, check out the demo, learn more about how to get started, or see the documentation.

We’re committed to continuously expanding the capabilities of 3D Maps in JavaScript, focusing on ease of use, accessibility, and more options for 3D customization and visualization. Your feedback is invaluable to us, so please share your feedback and feature requests as you explore these exciting new features. We can’t wait to see what you create!

Clay cityscape
Clay cityscape
Google Maps Platform
Get going with Google Maps Platform