> ## Content Index
> Fetch the complete content index at: https://blog.afi.io/llms.txt
> Use this file to discover other available public pages before exploring further.

# What is the Google Photorealistic 3D Tiles API?
- URL: https://blog.afi.io/blog/what-is-the-google-photorealistic-3d-tiles-api/
- Published: 2025-04-10T11:34:54.000Z
- Updated: 2026-08-21T05:38:18.000Z
- Description: Use cases, pricing and everything you need to know about building applications with the Google Maps Photorealistic 3D Tiles API.
- Author: Afian Anwar
- Tags: googlemaps

In this new tutorial series on the [Google Maps Photorealistic 3D Tiles API](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io) (commonly known as Google Maps 3D), I'll show you how to use the built-in 3D renderer of the [Maps Javascript API](https://developers.google.com/maps/documentation/javascript/3d-maps-overview?ref=blog.afi.io) 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](https://developers.google.com/maps/documentation/places/web-service/nearby-search?ref=blog.afi.io) and [Place Autocomplete](https://developers.google.com/maps/documentation/places/web-service/autocomplete?ref=blog.afi.io) with [Photorealistic 3D Tiles](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io), so that you can build a map based search application that that allows users to explore neighborhoods in immersive 3D.

![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2025/04/image-2.png)

**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](https://blog.afi.io/blog/how-to-pan-zoom-and-adjust-tilt-on-google-maps-3d/)  
Part 3: [Use Place Autocomplete to go anywhere on Google Maps 3D](https://blog.afi.io/blog/use-place-autocomplete-to-go-anywhere-on-google-maps-3d/)  
Part 4: [Add map markers, overlays and polylines to Google Maps 3D](https://blog.afi.io/blog/add-map-markers-overlays-and-polylines-to-google-maps-3d/)  
Part 5: [Add a 3D polygon to a Google Photorealistic 3D map](https://blog.afi.io/blog/add-a-3d-polygon-to-a-google-photorealistic-3d-map/)  
Part 6: [Senakw Vancouver on a Photorealistic 3D Map. Will it block your view?](https://blog.afi.io/blog/senakw-vancouver-will-it-block-your-view/)

[Google Maps 3D API DemoHow to use the Google Maps 3D API to create photorealistic 3D maps in Javascript![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/icon/logo192-16.png)![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/thumbnail/logo512-16.png)](https://google-maps-3d-api-demo.afi.dev/?ref=blog.afi.io)

[Senakw Vancouver on a Photorealistic 3D Map. Will it block your view?Using Google Photorealistic 3D Tiles to see if the Senakw Development in Vancouver will block your view.![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/icon/favicon-13.ico)![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/thumbnail/logo512-24.png)](https://senakw.afi.dev/?ref=blog.afi.io)

### What is the Google Maps Photorealistic 3D Tiles API?

The [Photorealistic 3D Tiles API](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io) gives developers access to high resolution, photorealistic 3D representations of the world, served as map tiles. It's the 3D version of Google's popular [Map Tiles API](https://developers.google.com/maps/documentation/tile?ref=blog.afi.io), 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](https://google-maps-3d-api-demo.afi.dev/?ref=blog.afi.io) or use the Google Maps app at [https://maps.google.com/](https://maps.google.com/?ref=blog.afi.io) by selecting *Globe View* and *Satellite* under Map Type. 

![How to view a 3D map in the consumer Google Maps app](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2025/04/image-3.png)

How to view a 3D map in the consumer Google Maps app

In this series, I’ll use the terms "Photorealistic 3D Tiles API" and "Photorealistic 3D Map" interchangeably. However, to be precise: the Google product you're working with is the Photorealistic 3D Map. The Photorealistic 3D Tiles API allows you to access this map using Google’s 3D rendering engine (powered by imagery from sources like Google Earth Engine), or with third-party engines like [CesiumJS](https://cesium.com/platform/cesiumjs/?ref=blog.afi.io).

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

Google recently sponsored the [2025 Google Photorealistic 3D Maps Challenge](https://google3dmaps.devpost.com/?ref=blog.afi.io) 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](https://devpost.com/software/daryaft?ref=blog.afi.io), 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](https://devpost.com/software/terrain-highlighting-modifications?ref=blog.afi.io), a visual exploration of beginner, intermediate and advanced ski runs.
- [Storm Vision](https://devpost.com/software/storm-vision?ref=blog.afi.io), 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](https://www.uber.com/ca/en/?ref=blog.afi.io) using 3D maps to draw the shortest route from point A to B, but it might be interesting for the [Singapore Tourism Board](https://www.stb.gov.sg/?ref=blog.afi.io) to use the Photorealistic 3D Tiles API to show the [Formula One route](https://singaporegp.sg/en/event-info/circuit-park-map/?ref=blog.afi.io) in this year's [Singapore Grand Prix](https://singaporegp.sg/en/?ref=blog.afi.io) 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](https://enterprise-insights.dji.com/blog/aerial-photography-vs-photogrammetry?ref=blog.afi.io). 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](https://cloud.google.com/find-a-partner/?expertises=Google+Maps+Platform&ref=blog.afi.io) 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](https://developers.google.com/maps/billing-and-pricing/pricing?ref=blog.afi.io#maps-3d-tiles-pricing) is shown below:

| **0 - 1k**                  | **1k - 100k** | **100k - 500k** | **500k - 1M** | **1M - 5M** | **5M+** |       |
| --------------------------- | ------------- | --------------- | ------------- | ----------- | ------- | ----- |
| Photorealistic 3D Tiles API | FREE          | $6.00           | $5.10         | $4.20       | $3.30   | $2.40 |

​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](https://cloud.google.com/find-a-partner/?expertises=Google+Maps+Platform&ref=blog.afi.io) 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](https://console.cloud.google.com/?ref=blog.afi.io). 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.

![Enabling the Google Map Tiles API in the Cloud Console](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2025/04/Screenshot-2025-04-08-at-9.50.54-AM.png)

Enabling the Google Map Tiles API in the Cloud Console

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](https://developers.google.com/codelabs/maps-platform/maps-platform-101-3d-maps-js?ref=blog.afi.io#0) written by Google Solutions Engineer [Matt Toon](https://www.linkedin.com/in/mtoon/?ref=blog.afi.io).

**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](https://developers.google.com/maps/documentation/javascript/overview?ref=blog.afi.io) 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**

![3D map view of Canada Place in Vancouver, Canada](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2025/04/Screenshot-2025-04-10-at-3.03.25-AM.png)

3D map view of Canada Place in Vancouver, Canada

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](https://www.canadaplace.ca/?ref=blog.afi.io) 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.

[hello\_google\_maps\_3dhello\_google\_maps\_3d.html2 KBdownload-circle](https://blog.afi.io/content/files/2025/04/hello%5Fgoogle%5Fmaps%5F3d.html "Download")

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 p*an 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](https://senseable.mit.edu/?ref=blog.afi.io). 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](https://senseable.mit.edu/livesingapore/?ref=blog.afi.io) and [Visual Explorations of Urban Mobility](https://senseable.mit.edu/visual-explorations-urban-mobility/?ref=blog.afi.io)). 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](https://www.arcgis.com/index.html?ref=blog.afi.io).
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](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io) solves both these problems. However, 3D Maps is still a very niche product compared to [2D Map Tiles](https://developers.google.com/maps/documentation/tile/2d-tiles-overview?ref=blog.afi.io), [Routes](https://developers.google.com/maps/documentation/routes?ref=blog.afi.io) and [Places](https://developers.google.com/maps/documentation/places/web-service/overview?ref=blog.afi.io). 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](https://visgl.github.io/react-google-maps/?ref=blog.afi.io) 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.

**This article was written by** [**Afi Labs**](https://afi.io/?ref=blog.afi.io)**, a** [**Google Maps Premier Partner**](https://www.afi.io/?ref=blog.afi.io) **and reseller. We build route optimization, navigation, and fleet tracking software on Google Maps, and offer volume pricing on GMP licensing.** [**Talk to an engineer**](https://www.afi.io/contact%5Fus?ref=blog.afi.io) **or** [**follow Afian on LinkedIn**](https://www.linkedin.com/in/afian-anwar/?ref=blog.afi.io)**.**

Next: [Part 2: How to pan, zoom, and adjust viewing angles on Google Maps 3D](https://blog.afi.io/blog/how-to-pan-zoom-and-adjust-tilt-on-google-maps-3d/)