What is the Google Photorealistic 3D Tiles API?

In this new tutorial series on the Google Maps Photorealistic 3D Tiles API (commonly known as Google Maps 3D), I'll show you how to use the built-in 3D renderer of the Maps Javascript API to create compelling 3D data visualizations with just a few lines of code. By the end, you'll have the knowledge and tools to integrate the Nearby Search API and Place Autocomplete with Photorealistic 3D Tiles, so that you can build a map based search application that that allows users to explore neighborhoods in immersive 3D.

Google Maps 3D API Demo

How to use the Google Maps 3D API to create photorealistic 3D maps in Javascript

Part 1: What is the Google Photorealistic 3D Tiles API? (this article)
Part 2: How to pan, zoom, and adjust tilt on Google Maps 3D
Part 3: Use Place Autocomplete to zoom to a specific location on Google Maps 3D
Part 4: Adding map markers, overlays and polylines to a Google Maps 3D app
Part 5: Add a three dimensional polygon to a Google Maps 3D scene
Part 6: Senakw Vancouver in Google Maps 3D. Will it block you view?

What is the Google Maps Photorealistic 3D Tiles API?

The Photorealistic 3D Tiles API gives developers access to high resolution, photorealistic 3D representations of the world. It's the 3D version of Google's popular Map Tiles API, and allows users to interact with the 3D tiles in an intuitive and immersive way:

• Pan: Users can drag the map to move or pan across the 3D scene to explore different areas.
• Zoom: Users can zoom in and out to change the level of detail, allowing them to see the 3D objects more closely or from a broader perspective. This can be done using standard zoom controls or by scrolling the mouse wheel.
• Tilt: Users can tilt the 3D view, providing an angle that helps them view buildings and landscapes from different perspectives, like looking up at a building or down at street level.
• Rotate: Users can rotate the scene around a fixed point to view objects or landscapes from different angles.

The API provides a rich set of controls and customization options (e.g. by adding map markers) for developers to tailor the interactions to their specific needs, making it perfect for applications such as virtual tours, real estate marketing, city planning, or interactive geospatial exploration. To get a feel for the API, you can play around with my online demo or use the Google Maps app at https://maps.google.com/ by selecting Globe View and Satellite under Map Type.

What is the Google Maps Photorealistic 3D Tiles API good for?

Google recently sponsored the 2025 Google Photorealistic 3D Maps Challenge to engage the developer community and encourage people to experiment and integrate the API into their own projects. The winners of the hackathon were:

• Daryaft, a visual guide to hiking trails in Mount Fuji (my personal favorite - I hike often in Japan but have never been to Mount Fuji).
• Terrain Hiking Modifications, a visual exploration of beginner, intermediate and advanced ski runs.
• Storm Vision, a disaster resilience tool that shows the impact of hurricanes and severe storms under various scenarios.

​All three winners shared a common theme: they integrated the inherent elevation, topography and terrain features of 3D maps with third party data sets to tell a compelling story.

Successful commercial projects using of 3D maps take a similar approach. There's no point in Uber using 3D maps to draw the shortest route from point A to B, but it might be interesting for the Singapore Tourism Board to use the Photorealistic 3D Tiles API to show the Formula One route in this year's Singapore Grand Prix on a virtual 3D map so that potential attendees can virtually explore the circuit, assess seating options, and identify the best spots with views of both the race and Singapore's downtown skyline.

For similar reasons, it's no surprise that most of Photorealistic 3D Tile's early users have mostly come from the real estate industry. Real estate development companies need 3D maps to visualize proposed developments within existing cityscapes, assess spatial relationships, and evaluate the impact on surrounding areas while potential buyers might be interested in using 3D maps to ensure that their views won't be obstructed or negatively affected by neighboring developments.

How does Google get 3D maps?

The 3D building data for the API largely comes from aerial photogrammetry. This involves capturing overlapping photographs from aircraft to create detailed 3D models of terrain and structures based on an accurate reconstruction of three dimensional features from two dimensional images.

Aerial photogrammetry is expensive because you have to rent pilot time and pay specialists to process the images and remove defects from the final product, which is why coverage of the Photorealistic 3D Tiles API is limited to major cities. If the city you're interested in isn't available in 3D, consider contacting a Google Maps Partner to submit a support request to Google on your behalf.

Photorealistic 3D Tiles pricing

Like other Google Maps Platform APIs, the Photorealistic 3D Tiles API uses a pay-as-you-go pricing model. There's a free usage cap of 1,000 API calls per month and past that, calls are billed at $6.00 CPM. The full pricing table that can be found at the official pricing page is shown below:

​Each API call associates a user session with a root tile set. The user can make as many 3D tile set requests as he wants within a three hour window without being charged again. However, if the user refreshes the page or closes and reopens the browser window, the next 3D tile map request will initiate a new root tile set request, resulting in extra billing.

As always, you can reach out to a Google Maps Partner for volume pricing and discounts.

Photorealistic 3D Tiles API key

To start using Photorealistic 3D Tiles, you need to first enable it in the Google Cloud Console. Once you've created a Google Cloud project, find your way to the APIs & Services page and search for "photorealistic". The "Map Tiles API" should show up. Click [Enable] to get access.

If you regularly work with Google Maps, the Map Tiles API is likely already enabled in your GCP Console. If that's the case, your project's API key should provide access to 3D map tiles without any issues.

Google Photorealistic 3D Tiles example

Here's a few lines of code to show you how easy it is to get started with Photorealistic 3D Tiles. Most of this code is taken from Creating your first 3D Map written by Google Solutions Engineer Matt Toon.

Create a basic web page in HTML

First, we'll create a basic web page in vanilla HTML. Save it as hello_google_maps_3d.html.

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Google Maps in 3D</title>
      <style>
         html,
         body {
         height: 100%;
         margin: 0;
         padding: 0;
         }
      </style>
   </head>
   <body>
   </body>
</html>

Add the dynamic loader

Add this bit of Javascript inside the <body/> tags of your webpage. The loader uses your Google Maps API key to authenticate with the server and pull map tile data.

<script async defer>
   (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
     key: "YOUR_API_KEY",
     v: "alpha",
   });
</script>

Replace "YOUR_API_KEY" with the Map Tiles API key from earlier. If you open hello_google_maps_3d.html in your web browser, you should get a blank page but no errors. Make sure you aren't using any ad blockers.

Create an Init Function and load the Google Photorealistic 3D tiles library

Next, use the Google Maps JavaScript API to dynamically load the experimental maps3d library with its Map3DElement and MapMode objects.

<script>
   async function init() {
     const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
   }
   init();
</script>

Create the 3D map element and specify the location

Inside the init() function, create a Map3DElement and bind it to the <body/>. This will return a scene with a view of the Canada Place cruise ship terminal in Vancouver, BC.

const map3DElement = new Map3DElement({
  center: { lat: 49.2929995, lng: -123.1208629, altitude: -25 },
  range: 2000,
  tilt: 80,
  heading: 315,
  mode: MapMode.HYBRID,
});

center: Sets the camera's target location in latitude, longitude, and altitude.
range: Defines how far the camera is from the target point, in meters.
tilt: The vertical angle of the camera (0° = top-down, 90° = fully horizontal).
heading: The compass direction the camera faces (in degrees, 0° = north).
mode: The visual style of the map. MapMode.HYBRID gives you satellite imagery with labels (like streets and place names). Use MapMode.SATELLITE to remove the labels.

That's it! Save your file and open hello_google_maps_3d.html in your browser. You can navigate the map with these mouse controls (just like in a video game).

Left-click + drag to rotate the camera around the center point (adjust tilt & heading).
Right-click + drag pan across the scene (move the camera position).
Scroll to zoom in and out (adjusts camera range).
[Shift] + scroll to tilt the view up or down.
[Ctrl] + scroll to rotate the view left or right.

My thoughts on the Google Maps Photorealistic 3D Tiles API

At the start of my software engineering career, I worked on several urban data visualization projects in collaboration with architects and urban planners at MIT's Senseable City Lab. Many of these projects involved layering multiple data sources such as the locations of buses, taxis, and trains, onto a city's base map (check out Live Singapore and Visual Explorations of Urban Mobility). This sounds straightforward, but it wasn't in 2012:

1. It was impossible to get high quality building data, especially in 3D. Even if you could somehow get hold of a low poly building models for an entire city, you'd have to view and conduct analysis on it using expensive proprietary software such as ArcGIS.
2. There was no way (not no easy way, I mean no way at all) to import this data into a browser and build useful web applications with it.

The Google Maps Photorealistic 3D Tiles API solves both these problems. However, 3D Maps is still a very niche product compared to 2D Map Tiles, Routes and Places. It's better suited for marketing campaigns and product demos rather than for regular, day to day use. It's also very new, so the ecosystem of libraries and tooling is still quite limited. For example, there are no React components and hooks like there are for 2D Maps Tiles.

In the next few blog posts, I'll show you how to use the API to add markers, polylines, and polygons to your map, enabling you to create useful and fun to use web applications with 3D maps.

Next: Part 2: How to pan, zoom, and adjust viewing angles on Google Maps 3D