Flatten the 3D mesh

You can flatten specific areas of the map to remove 3D buildings, structures, and flora. While mesh flattening preserves the underlying geometry of the terrain (the hills and valleys), it removes the clutter of trees, buildings, and man-made objects. This creates a clean space for placing custom 3D models, markers, or data layers without visual interference from existing map features.

Here's an example of a map with a select area that has been flattened:

TypeScript

async function initMap(): Promise<void> {
    await google.maps.importLibrary('maps3d');

    const map = document.querySelector('gmp-map-3d') as Element;
    const flattener = document.querySelector('gmp-flattener') as Element;
    map.append(flattener);

    const toggleButton = document.getElementById('toggleButton') as HTMLButtonElement;
    toggleButton.addEventListener('click', () => {
        if (flattener.isConnected) {
            flattener.remove();
            toggleButton.textContent = 'Enable Flattener';
        } else {
            map.append(flattener);
            toggleButton.textContent = 'Disable Flattener';
        }
    });

}

initMap();
index.ts

JavaScript

async function initMap() {
    await google.maps.importLibrary('maps3d');
    const map = document.querySelector('gmp-map-3d');
    const flattener = document.querySelector('gmp-flattener');
    map.append(flattener);
    const toggleButton = document.getElementById('toggleButton');
    toggleButton.addEventListener('click', () => {
        if (flattener.isConnected) {
            flattener.remove();
            toggleButton.textContent = 'Enable Flattener';
        }
        else {
            map.append(flattener);
            toggleButton.textContent = 'Disable Flattener';
        }
    });
}
initMap();
index.js

CSS

html,
gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.toggleButton {
  background: rgb(235, 235, 235);
  color: black;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.toggleButton:hover {
  background-color: #007bff;
  color: white;
}
style.css

HTML

<html>
    <head>
        <title>3D Mesh Flatten</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <gmp-map-3d
            center="40.70304023274898,-73.99453903360259,397.3687221767566"
            heading="-54.63577922139952"
            tilt="65.59195953953744"
            mode="SATELLITE">
            <gmp-flattener path="40.707680607935245,-74.00310353377735,500 40.70829665151717,-74.00193595590612,500 40.7073748659931,-74.00122787224885,500 40.706738652153156,-74.00232125268805,500 40.70738164589913,-74.0028721484274,500"></gmp-flattener>
        </gmp-map-3d>

        <button class="toggleButton" id="toggleButton" type="button">Disable Flattener</button>

        <script>
            (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
            v: "beta",
            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
            // Add other bootstrap parameters as needed, using camel case.
            });
        </script>
    </body>
</html>
index.html

Try Sample

Flatten an area

The following example demonstrates passing a path of lat/lng coordinates to the flattener:

<gmp-map-3d center="40.707, -74.017, 0" tilt="67.5">
  <gmp-flattener path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

Unflatten a specific area

The following example demonstrates removing an area of a polygon (using flattener.innerPaths) from the flattener:

<gmp-map-3d center="40.707, -74.007, 0" tilt="67.5">
  <gmp-flattener id="my-flattener" path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

<script>
  const flattener = document.getElementById('my-flattener');
  flattener.innerPaths = [
    [
      { lat: 40.71, lng: -74.0175 },
      { lat: 40.703, lng: -74.0165 },
      { lat: 40.7035, lng: -74.006 }
    ],
  ];
</script>

Key benefits

  • Customization: Remove default map geometry to clear space for your own 3D models.
  • Clarity: Provide a clear, unobstructed view of polygons and polylines, such as detailed routes, directly onto the map surface.
  • Camera visibility: Prevent buildings or trees from interfering with the camera view, obstructing your focal point.