Send feedback
Customize markers Stay organized with collections
Save and categorize content based on your preferences.
The following example shows how to customize markers in Photorealistic 3D Maps in Maps JavaScript. Read the documentation
.
JavaScript
async
function
init
()
{
const
{
Map3DElement
,
Marker3DElement
}
=
await
google
.
maps
.
importLibrary
(
"maps3d"
);
const
{
PinElement
}
=
await
google
.
maps
.
importLibrary
(
"marker"
);
const
map
=
new
Map3DElement
({
center
:
{
lat
:
37.4176
,
lng
:
-
122.02
,
altitude
:
0
},
tilt
:
67.5
,
range
:
7000
,
mode
:
'HYBRID'
});
map
.
mode
=
"SATELLITE"
;
// Change the border color.
const
pinBorder
=
new
PinElement
({
borderColor
:
'#FFFFFF'
,
});
const
markerWithBorder
=
new
Marker3DElement
({
position
:
{
lat
:
37.415
,
lng
:
-
122.035
},
});
markerWithBorder
.
append
(
pinBorder
);
// Add a label.
const
markerWithLabel
=
new
Marker3DElement
({
position
:
{
lat
:
37.419
,
lng
:
-
122.03
},
label
:
'Simple label'
});
// Adjust the scale.
const
pinScaled
=
new
PinElement
({
scale
:
1.5
,
});
const
markerWithScale
=
new
Marker3DElement
({
position
:
{
lat
:
37.419
,
lng
:
-
122.02
},
});
markerWithScale
.
append
(
pinScaled
);
// Change the glyph color.
const
pinGlyph
=
new
PinElement
({
glyphColor
:
'white'
,
});
const
markerWithGlyphColor
=
new
Marker3DElement
({
position
:
{
lat
:
37.415
,
lng
:
-
122.025
},
});
markerWithGlyphColor
.
append
(
pinGlyph
);
// Change many elements together and extrude marker.
const
pinTextGlyph
=
new
PinElement
({
background
:
'#F0F6FC'
,
glyph
:
'E'
,
glyphColor
:
'red'
,
borderColor
:
'#0000FF'
,
});
const
markerWithGlyphText
=
new
Marker3DElement
({
position
:
{
lat
:
37.415
,
lng
:
-
122.015
,
altitude
:
50
},
extruded
:
true
,
altitudeMode
:
"RELATIVE_TO_GROUND"
,
});
markerWithGlyphText
.
append
(
pinTextGlyph
);
// Hide the glyph.
const
pinNoGlyph
=
new
PinElement
({
glyph
:
''
,
});
const
markerWithNoGlyph
=
new
Marker3DElement
({
position
:
{
lat
:
37.415
,
lng
:
-
122.005
},
});
markerWithNoGlyph
.
append
(
pinNoGlyph
);
// Change the background color.
const
pinBackground
=
new
PinElement
({
background
:
'#FBBC04'
,
});
const
markerWithBackground
=
new
Marker3DElement
({
position
:
{
lat
:
37.419
,
lng
:
-
122.01
},
});
markerWithBackground
.
append
(
pinBackground
);
map
.
append
(
markerWithLabel
);
map
.
append
(
markerWithScale
);
map
.
append
(
markerWithBackground
);
map
.
append
(
markerWithBorder
);
map
.
append
(
markerWithGlyphColor
);
map
.
append
(
markerWithGlyphText
);
map
.
append
(
markerWithNoGlyph
);
document
.
body
.
append
(
map
);
}
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
-
marker
-
customization
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 customize markers in Photorealistic 3D Maps in Maps JavaScript.\n\n\u003cbr /\u003e\n\nRead the\n[documentation](/maps/documentation/javascript/3d/marker-customization). \n\nJavaScript \n\n```javascript\nasync function init() {\n const { Map3DElement, Marker3DElement } = await google.maps.importLibrary(\"maps3d\");\n const { PinElement } = await google.maps.importLibrary(\"marker\");\n const map = new Map3DElement({\n center: { lat: 37.4176, lng: -122.02, altitude: 0 },\n tilt: 67.5,\n range: 7000,\n mode: 'HYBRID'\n });\n map.mode = \"SATELLITE\";\n // Change the border color.\n const pinBorder = new PinElement({\n borderColor: '#FFFFFF',\n });\n const markerWithBorder = new Marker3DElement({\n position: { lat: 37.415, lng: -122.035 },\n });\n markerWithBorder.append(pinBorder);\n // Add a label.\n const markerWithLabel = new Marker3DElement({\n position: { lat: 37.419, lng: -122.03 },\n label: 'Simple label'\n });\n // Adjust the scale.\n const pinScaled = new PinElement({\n scale: 1.5,\n });\n const markerWithScale = new Marker3DElement({\n position: { lat: 37.419, lng: -122.02 },\n });\n markerWithScale.append(pinScaled);\n // Change the glyph color.\n const pinGlyph = new PinElement({\n glyphColor: 'white',\n });\n const markerWithGlyphColor = new Marker3DElement({\n position: { lat: 37.415, lng: -122.025 },\n });\n markerWithGlyphColor.append(pinGlyph);\n // Change many elements together and extrude marker.\n const pinTextGlyph = new PinElement({\n background: '#F0F6FC',\n glyph: 'E',\n glyphColor: 'red',\n borderColor: '#0000FF',\n });\n const markerWithGlyphText = new Marker3DElement({\n position: { lat: 37.415, lng: -122.015, altitude: 50 },\n extruded: true,\n altitudeMode: \"RELATIVE_TO_GROUND\",\n });\n markerWithGlyphText.append(pinTextGlyph);\n // Hide the glyph.\n const pinNoGlyph = new PinElement({\n glyph: '',\n });\n const markerWithNoGlyph = new Marker3DElement({\n position: { lat: 37.415, lng: -122.005 },\n });\n markerWithNoGlyph.append(pinNoGlyph);\n // Change the background color.\n const pinBackground = new PinElement({\n background: '#FBBC04',\n });\n const markerWithBackground = new Marker3DElement({\n position: { lat: 37.419, lng: -122.01 },\n });\n markerWithBackground.append(pinBackground);\n map.append(markerWithLabel);\n map.append(markerWithScale);\n map.append(markerWithBackground);\n map.append(markerWithBorder);\n map.append(markerWithGlyphColor);\n map.append(markerWithGlyphText);\n map.append(markerWithNoGlyph);\n document.body.append(map);\n}\ninit();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-marker-customization/docs/index.js#L9-L86\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-marker-customization/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-marker-customization/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-marker-customization/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-customization\n npm i\n npm start"]]
