Send feedback
Make polygons clickable Stay organized with collections
Save and categorize content based on your preferences.
The following example shows how to handle click events on polygons in
Photorealistic 3D Maps in Maps JavaScript. Read the documentation
.
JavaScript
async
function
init
()
{
const
{
Map3DElement
,
MapMode
,
Polygon3DInteractiveElement
}
=
await
google
.
maps
.
importLibrary
(
"maps3d"
);
const
map
=
new
Map3DElement
({
center
:
{
lat
:
40.6842
,
lng
:
-
74.0019
,
altitude
:
1000
},
heading
:
340
,
tilt
:
70
,
mode
:
MapMode
.
HYBRID
,
});
document
.
body
.
append
(
map
);
const
polygonOptions
=
{
strokeColor
:
"#0000ff80"
,
strokeWidth
:
8
,
fillColor
:
"#ff000080"
,
drawsOccludedSegments
:
false
,
};
const
examplePolygon
=
new
google
.
maps
.
maps3d
.
Polygon3DInteractiveElement
(
polygonOptions
);
examplePolygon
.
outerCoordinates
=
[
{
lat
:
40.7144
,
lng
:
-
74.0208
},
{
lat
:
40.6993
,
lng
:
-
74.019
},
{
lat
:
40.7035
,
lng
:
-
74.0004
},
{
lat
:
40.7144
,
lng
:
-
74.0208
}
];
examplePolygon
.
addEventListener
(
'gmp-click'
,
(
event
)
=
> {
// change the color of the polygon stroke and fill colors to a random alternatives!
event
.
target
.
fillColor
=
randomizeHexColor
(
event
.
target
.
fillColor
);
event
.
target
.
strokeColor
=
randomizeHexColor
(
event
.
target
.
fillColor
);
console
.
log
(
event
);
});
map
.
append
(
examplePolygon
);
}
function
randomizeHexColor
(
originalHexColor
)
{
console
.
log
(
originalHexColor
);
let
alpha
=
''
;
alpha
=
originalHexColor
.
substring
(
7
);
// Generate random values for Red, Green, Blue (0-255)
const
r
=
Math
.
floor
(
Math
.
random
()
*
256
);
const
g
=
Math
.
floor
(
Math
.
random
()
*
256
);
const
b
=
Math
.
floor
(
Math
.
random
()
*
256
);
console
.
log
(
r
+
" "
+
g
+
" "
+
b
);
// Convert decimal to 2-digit hex, padding with '0' if needed
const
rHex
=
(
'0'
+
r
.
toString
(
16
)).
slice
(
-
2
);
const
gHex
=
(
'0'
+
g
.
toString
(
16
)).
slice
(
-
2
);
const
bHex
=
(
'0'
+
b
.
toString
(
16
)).
slice
(
-
2
);
// Combine parts: '#' + random RGB + original Alpha (if any)
return
`#
${
rHex
}${
gHex
}${
bHex
}${
alpha
}
`
;
}
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
-
click
-
event
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,["The following example shows how to handle click events on polygons in Photorealistic 3D Maps in Maps JavaScript.\n\n\u003cbr /\u003e\n\nRead the [documentation](/maps/documentation/javascript/3d/shapes-lines#interactive_polygons). \n\nJavaScript \n\n```javascript\nasync function init() {\n const { Map3DElement, MapMode, Polygon3DInteractiveElement } = await google.maps.importLibrary(\"maps3d\");\n const map = new Map3DElement({\n center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },\n heading: 340,\n tilt: 70,\n mode: MapMode.HYBRID,\n });\n document.body.append(map);\n const polygonOptions = {\n strokeColor: \"#0000ff80\",\n strokeWidth: 8,\n fillColor: \"#ff000080\",\n drawsOccludedSegments: false,\n };\n const examplePolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);\n examplePolygon.outerCoordinates = [\n { lat: 40.7144, lng: -74.0208 },\n { lat: 40.6993, lng: -74.019 },\n { lat: 40.7035, lng: -74.0004 },\n { lat: 40.7144, lng: -74.0208 }\n ];\n examplePolygon.addEventListener('gmp-click', (event) =\u003e {\n // change the color of the polygon stroke and fill colors to a random alternatives!\n event.target.fillColor = randomizeHexColor(event.target.fillColor);\n event.target.strokeColor = randomizeHexColor(event.target.fillColor);\n console.log(event);\n });\n map.append(examplePolygon);\n}\nfunction randomizeHexColor(originalHexColor) {\n console.log(originalHexColor);\n let alpha = '';\n alpha = originalHexColor.substring(7);\n // Generate random values for Red, Green, Blue (0-255)\n const r = Math.floor(Math.random() * 256);\n const g = Math.floor(Math.random() * 256);\n const b = Math.floor(Math.random() * 256);\n console.log(r + \" \" + g + \" \" + b);\n // Convert decimal to 2-digit hex, padding with '0' if needed\n const rHex = ('0' + r.toString(16)).slice(-2);\n const gHex = ('0' + g.toString(16)).slice(-2);\n const bHex = ('0' + b.toString(16)).slice(-2);\n // Combine parts: '#' + random RGB + original Alpha (if any)\n return `#${rHex}${gHex}${bHex}${alpha}`;\n}\ninit();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-polygon-click-event/docs/index.js#L9-L55\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-click-event/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-click-event/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-click-event/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-click-event\n npm i\n npm start"]]
