Send feedback
Control marker collision behavior Stay organized with collections
Save and categorize content based on your preferences.
The following example shows how to change marker collision behavior. Read the documentation
.
JavaScript
const
markers
=
[];
async
function
init
()
{
// Request needed libraries.
const
{
Map3DElement
,
MapMode
,
Marker3DElement
}
=
await
google
.
maps
.
importLibrary
(
"maps3d"
);
const
map
=
new
Map3DElement
({
center
:
{
lat
:
47.6094
,
lng
:
-
122.3390
,
altitude
:
0
},
range
:
1000
,
mode
:
MapMode
.
HYBRID
,
});
for
(
const
[
lng
,
lat
]
of
positions
)
{
const
marker
=
new
Marker3DElement
({
position
:
{
lat
,
lng
},
// Try setting a different collision behavior here.
collisionBehavior
:
google
.
maps
.
CollisionBehavior
.
REQUIRED
});
markers
.
push
(
marker
);
map
.
append
(
marker
);
}
document
.
body
.
append
(
map
);
}
const
positions
=
[
[
-
122.3402
,
47.6093
],
[
-
122.3402
,
47.6094
],
[
-
122.3403
,
47.6094
],
[
-
122.3384
,
47.6098
],
[
-
122.3389
,
47.6095
],
[
-
122.3396
,
47.6095
],
[
-
122.3379
,
47.6097
],
[
-
122.3378
,
47.6097
],
[
-
122.3396
,
47.6091
],
[
-
122.3383
,
47.6089
],
[
-
122.3379
,
47.6093
],
[
-
122.3381
,
47.6095
],
[
-
122.3378
,
47.6095
],
];
init
();
const
dropdown
=
document
.
getElementById
(
'selectElementId'
);
dropdown
.
addEventListener
(
'change'
,
drawMap
);
function
drawMap
(
event
)
{
for
(
const
marker
of
markers
)
{
marker
.
collisionBehavior
=
dropdown
.
value
||
google
.
maps
.
CollisionBehavior
.
REQUIRED
;
}
}
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
;
}
selector
{
padding
:
2
px
;
float
:
right
;
}
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>
<selector>
<select id="selectElementId">
<option value="">Pick a Collision Behavior</option>
<option value="REQUIRED">Required</option>
<option value="REQUIRED_AND_HIDES_OPTIONAL">Required and hides optional</option>
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">Optional and hides lower priority</option>
</select>
</selector>
</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
-
marker
-
collision
-
behavior
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 change marker collision behavior.\n\n\u003cbr /\u003e\n\nRead the [documentation](/maps/documentation/javascript/3d/marker-collision). \n\nJavaScript \n\n```javascript\nconst markers = [];\nasync function init() {\n // Request needed libraries.\n const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary(\"maps3d\");\n const map = new Map3DElement({\n center: { lat: 47.6094, lng: -122.3390, altitude: 0 },\n range: 1000,\n mode: MapMode.HYBRID,\n });\n for (const [lng, lat] of positions) {\n const marker = new Marker3DElement({\n position: { lat, lng },\n // Try setting a different collision behavior here.\n collisionBehavior: google.maps.CollisionBehavior.REQUIRED\n });\n markers.push(marker);\n map.append(marker);\n }\n document.body.append(map);\n}\nconst positions = [\n [-122.3402, 47.6093],\n [-122.3402, 47.6094],\n [-122.3403, 47.6094],\n [-122.3384, 47.6098],\n [-122.3389, 47.6095],\n [-122.3396, 47.6095],\n [-122.3379, 47.6097],\n [-122.3378, 47.6097],\n [-122.3396, 47.6091],\n [-122.3383, 47.6089],\n [-122.3379, 47.6093],\n [-122.3381, 47.6095],\n [-122.3378, 47.6095],\n];\ninit();\nconst dropdown = document.getElementById('selectElementId');\ndropdown.addEventListener('change', drawMap);\nfunction drawMap(event) {\n for (const marker of markers) {\n marker.collisionBehavior = dropdown.value || google.maps.CollisionBehavior.REQUIRED;\n }\n}https://github.com/googlemaps-samples/js-api-samples/blob/5f4e6decfaf59cd69918bbf4e6338de03a63a5ba/dist/samples/3d-marker-collision-behavior/docs/index.js#L9-L51\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}\nselector {\n padding: 2px;\n float: right;\n} https://github.com/googlemaps-samples/js-api-samples/blob/5f4e6decfaf59cd69918bbf4e6338de03a63a5ba/dist/samples/3d-marker-collision-behavior/docs/style.css#L7-L22\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\n \u003cselector\u003e\n \u003cselect id=\"selectElementId\"\u003e\n \u003coption value=\"\"\u003ePick a Collision Behavior\u003c/option\u003e\n \u003coption value=\"REQUIRED\"\u003eRequired\u003c/option\u003e\n \u003coption value=\"REQUIRED_AND_HIDES_OPTIONAL\"\u003eRequired and hides optional\u003c/option\u003e\n \u003coption value=\"OPTIONAL_AND_HIDES_LOWER_PRIORITY\"\u003eOptional and hides lower priority\u003c/option\u003e\n \u003c/select\u003e\n \u003c/selector\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps-samples/js-api-samples/blob/5f4e6decfaf59cd69918bbf4e6338de03a63a5ba/dist/samples/3d-marker-collision-behavior/docs/index.html#L8-L31\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/3d-marker-collision-behavior/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-marker-collision-behavior\n npm i\n npm start"]]
