Marcadores avanzados usa dos clases para definir marcadores: la clase AdvancedMarkerElement
proporciona los parámetros básicos (position
, title
y map
) y la clase PinElement
contiene opciones para una mayor personalización. En el siguiente fragmento, se muestra el código necesario para crear una PinElement
nueva y, luego, aplicarla 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 mediante el elemento HTML gmp-advanced-marker
. Cualquier personalización que use la clase PinElement
debe aplicarse de manera programática. Para ello, tu código debe recuperar los elementos gmp-advanced-marker
de la página HTML. En el siguiente fragmento, se muestra el código para consultar una colección de elementos gmp-advanced-marker
y, luego, itera los resultados para aplicar la personalización declarada 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 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 texto del título de manera programática, usa la opción AdvancedMarkerElement.title
:
TypeScript
// 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',
});
JavaScript
// 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 texto de 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 cambiar el tamaño 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.03 },
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.03 },
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.02 },
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.02 },
content: pinGlyph.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.01 },
content: pinNoGlyph.element,
});
JavaScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
O bien establece PinElement.glyphColor
con el mismo valor que PinElement.background
.
De esta forma, el glifo se oculta visualmente.
Próximos pasos:
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2024-07-03 (UTC)
[]
[]