Basic marker customization

Markers API for 3D Maps 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

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({  glyphText: "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();

Next steps