Earlier this year at I/O, Google Maps Platform announced the launch of Photorealistic 3D Maps in the Maps JavaScript API. Since then, they’ve been inspired by how you want to use 3D Maps and love hearing your feedback. Recently, they announced a significant update to Experimental 3D Maps to make building immersive and engaging map experiences even more accessible. With this new suite of features for 3D Maps in Javascript, developers have more tools to streamline 3D development, offer intuitive and engaging user experiences, and further customise their real-world map experience.
What's new in 3D Maps JavaScript
Enable users to explore more intuitively.
Google Maps Platform knows smooth and intuitive navigation is crucial for a great user experience, especially when exploring the world in 3D. That’s why they’ve directly added intuitive map exploration controls into the 3D interface. Users can more easily pan, zoom, and rotate 3D maps and seamlessly explore them without writing complex code. This streamlines user onboarding and lets you focus on building the core of your application.
Exploration controls featuring Berlin, Germany
Annotate your 3D experience with markers you design
In addition to polygons and polylines, you can add more visual elements to your 3D map with customisable markers fully integrated into the 3D scene for a more immersive representation. Marker customisation 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 colour of the default pin, and replace the pin icon with your image or symbol.
Visually anchor the marker with an extruded line
Format collision and occlusion behaviour for optimal user view
Trigger specific actions with click events, such as displaying custom UI elements or initiating new camera actions
Custom markers highlight specific points of interest in Sydney, Australia.
Create dynamic transitions with preset camera paths.
Google Maps Platform has simplified the creation of 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 visualise 3D geospatial content with our newly added support for 3D models. Now, you can render gITF assets directly into your 3D map.
A custom 3D aeroplane simulates an arrival to Innsbruck, Austria.
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 enable event listeners for base map 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 creating immersive and engaging web experiences even more accessible. If you’re new to 3D Maps, check out the demo, learn more about how to get started, or contact us.
Comments