Polygon with extrusion

This example creates an extruded polygon around lower Manhattan. The polygon is a triangular prism, with a height of 1000 meters and 50% opacity.

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

      gmp-map-3d {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
      <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
    </gmp-map-3d>

    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

    <script>
      const polygon = document.querySelector('gmp-polygon-3d');

      customElements.whenDefined(polygon.localName).then(() => {
        polygon.outerCoordinates = [
          {lat: 40.7144, lng: -74.0208, altitude: 1000},
          {lat: 40.6993, lng: -74.019, altitude: 1000},
          {lat: 40.7035, lng: -74.0004, altitude: 1000},
          {lat: 40.7144, lng: -74.0208, altitude: 1000}
        ];
      });
    </script>
  </body>
</html>