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:
```javascript
// 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.
```javascript
// 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](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt#scale)
- [Change the background color](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt#background_color)
- [Change the border color](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt#border_color)
- [Change the glyph color](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt#glyph_color)
- [Add text to a glyph](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt#glyph_text)
- [Change the altitude](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt#altitude)
- [Remove markers](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt#remove)
## Scale the marker
To scale a marker, use the `scale` option:
```javascript
// 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:
```javascript
// 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:
```javascript
// 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:
```javascript
// 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:
```javascript
// 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:
```javascript
// 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:
```javascript
const marker = document.querySelector('gmp-marker-3d');
marker.remove();
```
## Next steps
- [Create markers with graphics](https://developers.google.com/maps/documentation/javascript/3d/marker-graphics.md.txt)