Personalización básica de los marcadores

La API de Marcadores para mapas 3D usa dos clases para definir marcadores: la clase 3DMarkerElement proporciona los parámetros básicos (position, label y map), y la clase PinElement contiene opciones para una mayor personalización.

Para agregar marcadores a un mapa, primero debes cargar la biblioteca de marcadores, que proporciona las clases 3DMarkerElement y PinElement.

En el siguiente fragmento, se muestra el código para crear un PinElement nuevo y, luego, aplicarlo a un marcador:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

En los mapas creados con HTML, los parámetros básicos de un marcador se declaran con el elemento HTML gmp-marker-3d. Cualquier personalización que use la clase PinElement debe aplicarse de forma programática. Para ello, tu código debe recuperar los elementos gmp-marker-3d de la página HTML. En el siguiente fragmento, se muestra el código para consultar una colección de elementos gmp-marker-3d y, luego, iterar por los resultados para aplicar la personalización que se declaró en 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);
}

En esta página, se muestra cómo personalizar los marcadores de las siguientes maneras:

Cómo cambiar el tamaño del marcador

Para cambiar el tamaño de un marcador, usa la opción scale:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Cómo cambiar el color del fondo

Usa la opción PinElement.background para cambiar el color de fondo de un marcador:

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

Cómo cambiar el color del borde

Usa la opción PinElement.borderColor para cambiar el color del borde de un marcador:

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

Cómo cambiar el color del glifo

Usa la opción PinElement.glyphColor para cambiar el color del glifo de un marcador:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);

Cómo agregar texto a un glifo

Usa la opción PinElement.glyph para reemplazar el glifo predeterminado por un carácter de texto. El glifo de texto de PinElement se ajusta con el PinElement y su color predeterminado coincide con el glyphColor predeterminado del 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);

Cómo cambiar la altitud

Usa la opción Marker3DElement.position.altitude combinada con Marker3DElement.altitudeMode y Marker3DElement.extruded para cambiar la altitud del marcador y agregar una línea extruida entre el suelo y el marcador:

// 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,
});

Cómo quitar marcadores

Usa Marker3DElement.remove() para quitar marcadores del mapa:

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

Próximos pasos