3D markers uses two classes to define markers: the 3DMarkerElement
class
provides the basic parameters ( position
, label
, and map
), and the PinElement
class contains options for further customization.
In order to add markers to a map, you must first load the marker library, which
provides the 3DMarkerElement
and PinElement
classes.
The following snippet shows code to create a new PinElement
, then apply it to
a marker:
const
pinScaled
=
new
PinElement
({
scale
:
1.5
,
});
const
markerWithLabel
=
new
Marker3DElement
({
position
:
{
lat
:
37.419
,
lng
:
-
122.03
},
label
:
'Simple label'
});
In maps created using HTML, the basic parameters for a marker are declared using
the gmp-marker-3d
HTML element; any customization that uses the PinElement
class must be applied programmatically. To do this, your code must retrieve the gmp-marker-3d
elements from the HTML page. The following snippet shows code to
query for a collection of gmp-marker-3d
elements, then iterate through the
results to apply customization that was declared in the gmp-marker-3d.
// Return an array of markers.
const
markers
=
[...
document
.
querySelectorAll
(
'gmp-marker-3d'
)];
// Loop through the markers
for
(
let
i
=
0
;
i
<
markers
.
length
;
i
++
)
{
const
pin
=
new
PinElement
({
scale
:
2.0
,
});
markers
[
i
].
appendChild
(
pin
.
element
);
}
This page shows you how to customize markers in the following ways:
- Scale the marker
- Change the background color
- Change the border color
- Change the glyph color
- Add text to a glyph
- Change the altitude
- Remove markers
Scale the marker
To scale a marker, use the scale
option:
// Adjust the scale.
const
pinScaled
=
new
PinElement
({
scale
:
1.5
,
});
const
markerScaled
=
new
Marker3DElement
({
map
,
position
:
{
lat
:
37.419
,
lng
:
-
122.02
},
});
markerScaled
.
appendChild
(
pinScaled
);
Change the background color
Use the PinElement.background
option to change the background color of a
marker:
// Change the background color.
const
pinBackground
=
new
PinElement
({
background
:
'#FBBC04'
,
});
const
markerBackground
=
new
Marker3DElement
({
map
,
position
:
{
lat
:
37.419
,
lng
:
-
122.01
},
});
markerBackground
.
appendChild
(
pinBackground
);
Change the border color
Use the PinElement.borderColor
option to change the border color of a marker:
// Change the border color.
const
pinBorder
=
new
PinElement
({
borderColor
:
"#137333"
,
});
const
markerBorder
=
new
Marker3DElement
({
map
,
position
:
{
lat
:
37.415
,
lng
:
-
122.035
},
});
markerBorder
.
appendChild
(
pinBorder
);
Change the glyph color
Use the PinElement.glyphColor
option to change the glyph color of a marker:
// Change the glyph color.
const
pinGlyph
=
new
PinElement
({
glyphColor
:
"white"
,
});
const
markerGlyph
=
new
Marker3DElement
({
map
,
position
:
{
lat
:
37.415
,
lng
:
-
122.025
},
});
markerGlyph
.
appendChild
(
pinGlyph
);
Add text to a glyph
Use the PinElement.glyph
option to replace the default glyph with a text
character. The text glyph of the PinElement
scales with the PinElement
and
its default color matches the default glyphColor
of the PinElement:
const
pinTextGlyph
=
new
PinElement
({
glyph
:
"T"
,
glyphColor
:
"white"
,
});
const
markerGlyphText
=
new
Marker3DElement
({
map
,
position
:
{
lat
:
37.415
,
lng
:
-
122.015
},
});
markerGlyphText
.
appendChild
(
pinTextGlyph
);
Change the altitude
Use the Marker3DElement.position.altitude
option combined with Marker3DElement.altitudeMode
and Marker3DElement.extruded
to change the
marker's altitude and add an extruded line between the ground and marker:
const
marker
=
new
Marker3DElement
({
position
:
{
lat
:
37.4239163
,
lng
:
-
122.0947209
,
altitude
:
100
},
altitudeMode
:
'RELATIVE_TO_GROUND'
,
extruded
:
true
,
});
Remove markers
Use Marker3DElement.remove()
to remove markers from the map:
const
marker
=
document
.
querySelector
(
'gmp-marker-3d'
);
marker
.
remove
();
