3D Maps for JavaScript API now in Preview: start building your own immersive maps experience today

Today we’re unveiling the Preview release of Photorealistic 3D Maps in the Maps JavaScript API, paving the way for a new era for immersive web mapping. Starting with just a single line of code, developers can build breathtaking, interactive 3D map experiences that go beyond simple visuals and offer users a better sense of what it’s like to be there.

Since our last release, we’ve been inspired by how developers are experimenting and pushing the boundaries of what’s possible with 3D Maps—from immersive location discovery to creative digital storytelling. Following strong interest and valuable feedback from our developer community, this update builds on the community's feedback—making it easier to create custom, interactive 3D maps for web and mobile web experiences—and reinforces our commitment to bring Photorealistic 3D Maps to General Availability.

What’s new in Preview

Integrated basemap place information

3D Maps now includes basic place information like name and address when selecting a point of interest or label on the 3D basemap. This eliminates the need for separate Places API calls for this type of place information, providing a seamless and efficient way to offer context about a location or place. If your application requires richer or more detailed place data, you can easily integrate the Places API to access additional attributes and insights as needed.

New customizable content windows

Developers can now display custom content connected to a specific place or general location, using the PopoverElement, providing more options to craft rich, engaging narratives directly within the 3D map. Popover elements are fully customizable using HTML and CSS, allowing for display of detailed place information, stunning images, or animated elements for a truly immersive learning experience.

Custom image-based markers

Brands are unique, and your 3D map should be too. We’ve added more options to customize your markers to ensure brand consistency and differentiate key locations. You can now replace the default marker pin with your own custom images and SVGs. Similar to how the PinElement works today, simply add your image to the Marker3DElement to display your custom image-based marker.

More interactive visual elements

Gain more granular control over user interactions within the 3D environment with expanded click event support for various 3D map elements including polygons, polylines, and 3D models. This allows developers to implement custom event handlers, trigger camera changes and animations, and update data dynamically based on user engagement with specific map elements. 

Improved marker accessibility

We believe everyone should be able to experience interactive 3D Maps. With this Preview release, markers and info windows are now fully keyboard and screen reader accessible, providing an inclusive experience for the annotations you display. 

With new options to customize your 3D Maps experience, you can tailor visuals and interactions to better suit your audience’s needs. These features allow you to incorporate your own narratives and branding, and integrate 3D Maps smoothly into your existing workflows—all within a platform designed with developers in mind.

What we heard from our early adopters

Early adopters have seen success leveraging the power of 3D Maps in JavaScript to create compelling visual applications for their end users that improved how users engage with their products.

Integrating Google’s 3D Maps has unlocked a new dimension of user engagement for our projects. The photorealistic detail and ease of implementation allow us to create truly immersive experiences that go beyond traditional 2D maps. This technology empowers our clients to build intuitive and visually stunning applications, setting a new standard for user interaction with geospatial data. Martin Kleppe CTO, Ubilabs

Run Concierge incorporates Google Maps Platform 3D Maps—providing runners a more immersive experience of real world locations, visualizing 3D buildings and terrain providing a more detailed understanding of the route before the race which, in turn, helps runners feel more prepared, confident, and connected. This not only enhances the runner experience but also supports the goals of our major outdoor brand partners, like ASICS, who are committed to empowering and engaging their communities in personalized and meaningful ways. Cade Netscher CEO of Neurun Inc.

In October 2024, we launched the Google Maps Platform Photorealistic 3D Maps Challenge, attracting over 1,750 developers from 160+ countries to create immersive experiences using the Maps JavaScript API. The grand prize went to Daryaft, an interactive Mount Fuji travel guide that lets users explore trails and surroundings with a dynamic 3D map. As users scroll, the map zooms to specific areas and highlights trails on hover, while also providing user reviews, ratings, and recommendations for the best viewpoints to help plan their journey.

What's next? Start building with 3D Maps today

Start building your own immersive maps experience with 3D Maps in Maps JavaScript API—now available in Preview—and explore the new API features to help bring those creations to life. 3D Maps JavaScript is available to all developers at no cost during the Preview stage, with pricing information now available to help plan and scale your implementation. 

Now it's your turn to explore the immersive potential of 3D Maps in JavaScript. Here are key resources to help you get started:

• Explore the API documentation to understand the full range of features and customization options available for 3D Maps.

• Work through code samples and interactive code labs that guide you step-by-step, from displaying your first 3D map to adding custom features and interactive elements to your 3D map.

• Experience 3D Maps in action with a live demo.

Your feedback is essential—share your thoughts on these new features, showcase your creations, and help us shape the future of immersive mapping.

We can't wait to see what you build.