Marcadores avanzados usa dos clases para definir marcadores:
La clase AdvancedMarkerElement
proporciona los parámetros básicos (position
y
title
y map
), y la clase PinElement
contiene opciones para más
personalización. En el siguiente fragmento, se muestra el código para crear un PinElement
nuevo y, luego, aplicarlo a un marcador.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
En los mapas creados con HTML, los parámetros básicos de un marcador se declaran con
el elemento HTML gmp-advanced-marker
cualquier personalización que use
La clase PinElement
debe aplicarse de manera programática. Para ello, el código debe recuperar los elementos gmp-advanced-marker
de la página HTML. En el siguiente fragmento, se muestra código para consultar una colección de elementos gmp-advanced-marker
y, luego, iterar por los resultados para aplicar la personalización que se declaró en PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
En esta página, te indicamos los pasos para personalizar los marcadores de las siguientes maneras:
- Cómo agregar el texto del título
- Cómo ajustar el tamaño del marcador
- Cómo cambiar el color de fondo
- Cómo cambiar el color del borde
- Cómo cambiar el color del glifo
- Cómo usar texto en un glifo
- Cómo ocultar el glifo
Cómo agregar el texto del título
El texto del título aparece cuando se coloca el cursor sobre un marcador. A su vez, el texto del título es legible para los lectores de pantalla.
Para agregar el texto del título de forma programática, usa la opción AdvancedMarkerElement.title
:
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.03 }, title: "Title text for the marker at lat: 37.419, lng: -122.03", });
Para agregar el texto del título a un marcador creado con HTML, usa el atributo title
:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
Cómo aumentar la escala del marcador
Para ajustar el tamaño de un marcador, usa la opción scale
.
TypeScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
JavaScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
Cómo cambiar el color del fondo
Usa la opción PinElement.background
para cambiar el color del fondo de un marcador:
TypeScript
// Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
JavaScript
// Change the background color. const pinBackground = new PinElement({ background: "#FBBC04", }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
Cómo cambiar el color del borde
Usa la opción PinElement.borderColor
para cambiar el color del borde de un marcador:
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.035 }, content: pinBorder.element, });
JavaScript
// Change the border color. const pinBorder = new PinElement({ borderColor: "#137333", }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.035 }, content: pinBorder.element, });
Cómo cambiar el color del glifo
Usa la opción PinElement.glyphColor
para cambiar el color del glifo de un marcador:
TypeScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.025 }, content: pinGlyph.element, });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: "white", }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.025 }, content: pinGlyph.element, });
Cómo agregar texto a un glifo
Usa la opción PinElement.glyph
para reemplazar el glifo predeterminado por un texto.
carácter. El glifo de texto de PinElement
se ajusta con PinElement
y su color predeterminado coincide con el glyphColor
predeterminado de PinElement
.
TypeScript
const pinTextGlyph = new PinElement({ glyph: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
JavaScript
const pinTextGlyph = new PinElement({ glyph: "T", glyphColor: "white", }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
Cómo ocultar el glifo
Pasa una cadena vacía como valor de la opción PinElement.glyph
para ocultar el glifo de un marcador:
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
O bien establece PinElement.glyphColor
con el mismo valor que PinElement.background
.
De esta forma, el glifo se oculta visualmente.