Basic marker customization

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

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();

Next steps