Personalização básica de marcadores

A API Markers para mapas 3D usa duas classes para definir marcadores: a classe 3DMarkerElement fornece os parâmetros básicos (position, label e map), e a classe PinElement contém opções para mais personalização.

Para adicionar marcadores a um mapa, primeiro carregue a biblioteca de marcadores, que fornece as classes 3DMarkerElement e PinElement.

O snippet a seguir mostra o código para criar um novo PinElement e aplicá-lo a um 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);

Em mapas criados usando HTML, os parâmetros básicos de um marcador são declarados usando o elemento HTML gmp-marker-3d. Qualquer personalização que use a classe PinElement precisa ser aplicada de maneira programática. Para fazer isso, o código precisa recuperar os elementos gmp-marker-3d da página HTML. O snippet a seguir mostra o código para consultar uma coleção de elementos gmp-marker-3d e, em seguida, iterar os resultados para aplicar a personalização declarada no 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);
}

Nesta página, mostramos como personalizar marcadores das seguintes maneiras:

Ajustar a escala do marcador

Para ajustar a escala de um marcador, use a opção 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);

Mudar a cor do plano de fundo

Use a opção PinElement.background para mudar a cor de fundo de um 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);

Mudar a cor da borda

Use a opção PinElement.borderColor para mudar a cor da borda de um 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);

Mudar a cor do glifo

Use a opção PinElement.glyphColor para mudar a cor do glifo de um 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);

Adicionar texto a um glifo

Use a opção PinElement.glyph para substituir o glifo padrão por um caractere de texto. O glifo de texto do PinElement é dimensionado com o PinElement e a cor padrão corresponde ao glyphColor padrão do 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);

Mudar a altitude

Use a opção Marker3DElement.position.altitude combinada com Marker3DElement.altitudeMode e Marker3DElement.extruded para mudar a altitude do marcador e adicionar uma linha extrudada entre o chão e o 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,
});

Remover marcadores

Use Marker3DElement.remove() para remover marcadores do mapa:

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

Próximas etapas