> ## 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.
# Add a 3D polygon to a Google Photorealistic 3D map
- URL: https://blog.afi.io/blog/add-a-3d-polygon-to-a-google-photorealistic-3d-map/
- Published: 2025-05-06T19:45:53.000Z
- Updated: 2026-08-21T05:37:37.000Z
- Description: Learn how to add custom 3D polygons to a Google Photorealistic 3D Map - perfect for drawing buildings, landmarks, and other structures.
- Author: Afian Anwar
- Tags: googlemaps
Ever wanted to draw buildings or highlight landmarks in a real world 3D map? With [Google Maps Photorealistic 3D Tiles](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io), you can now overlay custom 3D polygons directly onto a Google Photorealistic 3D Map. This short blog post will show you how.
Part 1: [What is the Google Photorealistic 3D Tiles API](https://blog.afi.io/blog/what-is-the-google-photorealistic-3d-tiles-api/)?
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 (this article)**
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/)
For years, table top 3D scale models have been essential tools in real estate showrooms and city planning meetings. They help visualize how new buildings will fit into their surroundings and what impact they'll have on the neighborhood. Most 3D models are either 3D printed or built by hand, an expensive process that can take up to four weeks ([Vancouver scale model business continues to innovate while on the brink of extinction](https://vancouversun.com/news/vancouver-scale-model-business-innovation-extinction?ref=blog.afi.io)). With the [Google Photorealistic 3D Tiles API](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io), you can add a scale model to a web based map in minutes - making it instantly viewable to anyone with a browser and an internet connection.
### How to add a 3D polygon to a Google Photorealistic 3D Map
Adding a 3D polygon to a Photorealistic 3D Map is not much different from adding a 2D shape to a regular Google Map. There are three things you need to do.
1. Add a `` component as a child component of ``. The code below adds a `` element with the `id` of "triangleA" to the 3D scene. The element is given a `fill-color` of (52, 168, 83, 0.7) - dark green with some transparency, and a `stroke-color` of "34A853" and `stroke-width` of "2".
```
```
1. Create an array of `lat`, `lng`, and `altitude` tuples representing the vertices of the top edge of the shape you want to display. Ensure that the coordinate tuples follow the GeoJSON convention: they should be arranged in a counter-clockwise order, and the first and last coordinates must be identical to "close" the polygon.
```
const triangleACoords = [
{ lat: 49.27854365435877, lng: -123.14497716448827, altitude: 60 },
{ lat: 49.278151213577615, lng: -123.14440607465572, altitude: 110 },
{ lat: 49.27863307080892, lng: -123.14406342075597, altitude: 80 },
{ lat: 49.27854365435877, lng: -123.14497716448827, altitude: 60 },
];
```
There are many ways to get this data. The easiest would be to work with a professional urban planning or architecture firm and ask for a "low res poly" building model. If you are doing this by yourself, you can use a tool such as [geojson.io](https://geojson.io/?ref=blog.afi.io) to mark vertices on a map and write some code to convert it to a [Lat/Lng Object Literal](https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal?ref=blog.afi.io) array.
You can use geojson.io to map building boundaries into a GeoJSON array
1. Retrieve the `` element and assign its `outerCoordinates` property to the array of coordinate tuples defined earlier.
```
const triangleA = document.querySelector("#triangleA");
triangleA.outerCoordinates = triangleACoords;
```
The attached example code adds three modern triangular buildings to the green space along the Vancouver seawall.
3D polygons set on a Google Photorealistic 3D map
To run it, save `google_maps_3d_polygons.html` to your computer and open the file in your browser. In the `` tag, replace {YOUR\_API\_KEY} with your Google Maps API key with the [Map Tiles API](https://developers.google.com/maps/documentation/tile?ref=blog.afi.io) enabled.
[google\_maps\_3d\_polygonsgoogle\_maps\_3d\_polygons.html5 KBdownload-circle](https://blog.afi.io/content/files/2025/05/google%5Fmaps%5F3d%5Fpolygons.html "Download")
In the next post, I’ll show how I used Google Photorealistic 3D Tiles to visualize the impact of new apartments on the Vancouver skyline.
**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 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/)