Markers API for 3D Maps uses two classes to define markers: the Marker3DElement
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 Marker3DElement
and PinElement
classes.
The following snippet shows code to create a new PinElement
, then apply it to
a marker:
// Adjust the scale. const pinScaled = new PinElement ({ scale : 1.5 , }); const markerWithScale = new Marker3DElement ({ position : { lat : 37.419 , lng : - 122.02 }, }); markerWithScale . append ( pinScaled );
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 markerWithScale = new Marker3DElement ({ position : { lat : 37.419 , lng : - 122.02 }, }); markerWithScale . append ( 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 markerWithBackground = new Marker3DElement ({ position : { lat : 37.419 , lng : - 122.01 }, }); markerWithBackground . append ( 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 : '#FFFFFF' , }); const markerWithBorder = new Marker3DElement ({ position : { lat : 37.415 , lng : - 122.035 }, }); markerWithBorder . append ( 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 markerWithGlyphColor = new Marker3DElement ({ position : { lat : 37.415 , lng : - 122.025 }, }); markerWithGlyphColor . append ( 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:
// Change many elements together and extrude marker. const pinTextGlyph = new PinElement ({ background : '#F0F6FC' , glyphText : '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 );
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:
// Change a marker's altitude and add an extrusion. const extrudedMarker = 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
();
