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="rgba(255, 0, 0, 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>