Markers API for 3D Maps uses two classes to define markers: the3DMarkerElement class provides the basic parameters (position,label, andmap), and thePinElement class contains options for further customization.

In order to add markers to a map, you must first load the marker library, whichprovides the3DMarkerElement andPinElement classes.

The following snippet shows code to create a newPinElement, then apply it toa marker:

constpinScaled=newPinElement({scale:1.5,});constmarkerWithLabel=newMarker3DElement({position:{lat:37.419,lng:-122.03},label:'Simple label'});

In maps created using HTML, the basic parameters for a marker are declared usingthegmp-marker-3d HTML element; any customization that uses thePinElementclass must be applied programmatically. To do this, your code must retrieve thegmp-marker-3d elements from the HTML page. The following snippet shows code toquery for a collection ofgmp-marker-3d elements, then iterate through theresults to apply customization that was declared in the gmp-marker-3d.

// Return an array of markers.constmarkers=[...document.querySelectorAll('gmp-marker-3d')];// Loop through the markersfor(leti=0;i <markers.length;i++){constpin=newPinElement({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 thescale option:

// Adjust the scale.constpinScaled=newPinElement({scale:1.5,});constmarkerScaled=newMarker3DElement({map,position:{lat:37.419,lng:-122.02},});markerScaled.appendChild(pinScaled);

Change the background color

Use thePinElement.background option to change the background color of amarker:

// Change the background color.constpinBackground=newPinElement({background:'#FBBC04',});constmarkerBackground=newMarker3DElement({map,position:{lat:37.419,lng:-122.01},});markerBackground.appendChild(pinBackground);

Change the border color

Use thePinElement.borderColor option to change the border color of a marker:

// Change the border color.constpinBorder=newPinElement({borderColor:"#137333",});constmarkerBorder=newMarker3DElement({map,position:{lat:37.415,lng:-122.035},});markerBorder.appendChild(pinBorder);

Change the glyph color

Use thePinElement.glyphColor option to change the glyph color of a marker:

// Change the glyph color.constpinGlyph=newPinElement({glyphColor:"white",});constmarkerGlyph=newMarker3DElement({map,position:{lat:37.415,lng:-122.025},});markerGlyph.appendChild(pinGlyph);

Add text to a glyph

Use thePinElement.glyph option to replace the default glyph with a textcharacter. The text glyph of thePinElement scales with thePinElement andits default color matches the defaultglyphColor of the PinElement:

constpinTextGlyph=newPinElement({glyphText:"T",glyphColor:"white",});constmarkerGlyphText=newMarker3DElement({map,position:{lat:37.415,lng:-122.015},});markerGlyphText.appendChild(pinTextGlyph);

Change the altitude

Use theMarker3DElement.position.altitude option combined withMarker3DElement.altitudeMode andMarker3DElement.extruded to change themarker's altitude and add an extruded line between the ground and marker:

constmarker=newMarker3DElement({position:{lat:37.4239163,lng:-122.0947209,altitude:100},altitudeMode:'RELATIVE_TO_GROUND',extruded:true,});

Remove markers

UseMarker3DElement.remove() to remove markers from the map:

constmarker=document.querySelector('gmp-marker-3d');marker.remove();

Next steps

• Create markers with graphics