Send feedback
Extruded polygon with hole Stay organized with collections
Save and categorize content based on your preferences.
This example creates an extruded polygon with an inner hole. Read the documentation
.
JavaScript
async
function
init
()
{
const
{
Map3DElement
,
MapMode
,
AltitudeMode
,
Polygon3DElement
}
=
await
google
.
maps
.
importLibrary
(
"maps3d"
);
const
map3DElement
=
new
Map3DElement
({
center
:
{
lat
:
40.6842
,
lng
:
-
74.0019
,
altitude
:
1000
},
heading
:
340
,
tilt
:
70
,
mode
:
MapMode
.
HYBRID
,
});
const
polygonOptions
=
{
strokeColor
:
"#0000ff80"
,
strokeWidth
:
8
,
fillColor
:
"#ff000080"
,
drawsOccludedSegments
:
false
,
extruded
:
true
,
altitudeMode
:
AltitudeMode
.
RELATIVE_TO_GROUND
};
const
examplePolygon
=
new
google
.
maps
.
maps3d
.
Polygon3DElement
(
polygonOptions
);
examplePolygon
.
outerCoordinates
=
[
{
lat
:
40.7144
,
lng
:
-
74.0208
,
altitude
:
200
},
{
lat
:
40.6993
,
lng
:
-
74.019
,
altitude
:
200
},
{
lat
:
40.7035
,
lng
:
-
74.0004
,
altitude
:
200
}
];
examplePolygon
.
innerCoordinates
=
[
[
{
lat
:
40.71
,
lng
:
-
74.0175
,
altitude
:
200
},
{
lat
:
40.703
,
lng
:
-
74.0165
,
altitude
:
200
},
{
lat
:
40.7035
,
lng
:
-
74.006
,
altitude
:
200
}
]
];
map3DElement
.
append
(
examplePolygon
);
document
.
body
.
append
(
map3DElement
);
}
init
();
Note:
The JavaScript is compiled from the TypeScript snippet.
CSS
/* * Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
html
,
map
{
height
:
100
%
;
}
body
{
height
:
100
%
;
margin
:
0
;
padding
:
0
;
}
HTML
<html>
<head>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<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",});</script>
</body>
</html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions
to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git
clone
https
:
//github.com/googlemaps-samples/js-api-samples.git
cd
samples
/
3
d
-
polygon
-
extruded
-
hole
npm
i
npm
start
Send feedback
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License
, and code samples are licensed under the Apache 2.0 License
. For details, see the Google Developers Site Policies
. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-09-04 UTC.
Need to tell us more?
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[],[],null,["This example creates an extruded polygon with an inner hole.\n\n\u003cbr /\u003e\n\nRead the [documentation](/maps/documentation/javascript/3d/shapes-lines). \n\nJavaScript \n\n```javascript\nasync function init() {\n const { Map3DElement, MapMode, AltitudeMode, Polygon3DElement } = await google.maps.importLibrary(\"maps3d\");\n const map3DElement = new Map3DElement({\n center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },\n heading: 340,\n tilt: 70,\n mode: MapMode.HYBRID,\n });\n const polygonOptions = {\n strokeColor: \"#0000ff80\",\n strokeWidth: 8,\n fillColor: \"#ff000080\",\n drawsOccludedSegments: false,\n extruded: true,\n altitudeMode: AltitudeMode.RELATIVE_TO_GROUND\n };\n const examplePolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);\n examplePolygon.outerCoordinates = [\n { lat: 40.7144, lng: -74.0208, altitude: 200 },\n { lat: 40.6993, lng: -74.019, altitude: 200 },\n { lat: 40.7035, lng: -74.0004, altitude: 200 }\n ];\n examplePolygon.innerCoordinates = [\n [\n { lat: 40.71, lng: -74.0175, altitude: 200 },\n { lat: 40.703, lng: -74.0165, altitude: 200 },\n { lat: 40.7035, lng: -74.006, altitude: 200 }\n ]\n ];\n map3DElement.append(examplePolygon);\n document.body.append(map3DElement);\n}\ninit();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-polygon-extruded-hole/docs/index.js#L9-L41\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\nhtml,\nmap {\n height: 100%;\n}\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-polygon-extruded-hole/docs/style.css#L7-L18\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eMap\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- prettier-ignore --\u003e\n \u003cscript\u003e(g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})\n ({key: \"AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8\", v: \"beta\",});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-polygon-extruded-hole/docs/index.html#L8-L22\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/3d-polygon-extruded-hole/jsfiddle)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone https://github.com/googlemaps-samples/js-api-samples.git\n cd samples/3d-polygon-extruded-hole\n npm i\n npm start"]]
