Add a 3D polygon to a Google Photorealistic 3D map

Ever wanted to draw buildings or highlight landmarks in a real world 3D map? With Google Maps Photorealistic 3D Tiles, 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?
Part 2: How to pan, zoom, and adjust tilt on Google Maps 3D
Part 3: Use Place Autocomplete to go anywhere on Google Maps 3D
Part 4: 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?

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). With the Google Photorealistic 3D Tiles API, 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 <gmp-polygon-3d/> component as a child component of <gmp-map-3d/>. The code below adds a <gmp-polygon-3d/> 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".

<gmp-map-3d mode="SATELLITE" heading="120" range="1500" tilt="70" center="49.2736533,-123.1395109, 50">
   <gmp-polygon-3d id="triangleA" altitude-mode="relative-to-ground" fill-color="rgba(52, 168, 83, 0.7)" stroke-color="#34A853" stroke-width="2" extruded></gmp-polygon-3d>
</gmp-map-3d>

2. 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 to mark vertices on a map and write some code to convert it to a Lat/Lng Object Literal array.

3. Retrieve the <gmp-polygon-3d/> 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.

To run it, save google_maps_3d_polygons.html to your computer and open the file in your browser. In the <body/> tag, replace {YOUR_API_KEY} with your Google Maps API key with the Map Tiles API enabled.

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.

Next: Part 6: Senakw Vancouver on a Photorealistic 3D Map. Will it block your view?