Advanced Markers

Clase AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

Muestra una posición en un mapa. Ten en cuenta que se debe establecer el position para que se muestre el AdvancedMarkerElement.

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

Constructor
AdvancedMarkerElement	AdvancedMarkerElement([options]) Parámetros: options: AdvancedMarkerElementOptions optional Crea un AdvancedMarkerElement con las opciones especificadas. Si se especifica un mapa, se agrega el AdvancedMarkerElement al mapa durante la construcción.

Propiedades
anchorLeft attr: anchor-left	Tipo: string optional Valor predeterminado: "-50%" Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje del marcador desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado. Atributo HTML: anchor-left="string"
anchorTop attr: anchor-top	Tipo: string optional Valor predeterminado: "-100%" Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje del marcador desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado. Atributo HTML: anchor-top="string"
collisionBehavior	Tipo: CollisionBehavior optional Consulta los AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable attr: gmp-clickable	Tipo: boolean optional Consulta los AdvancedMarkerElementOptions.gmpClickable. Atributo HTML: gmp-clickable
gmpDraggable	Tipo: boolean optional Consulta los AdvancedMarkerElementOptions.gmpDraggable.
map	Tipo: Map optional Consulta los AdvancedMarkerElementOptions.map.
position attr: position	Tipo: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Consulta los AdvancedMarkerElementOptions.position. Atributo HTML: position="lat,lng" position="lat,lng,altitude"
title attr: title	Tipo: string Consulta los AdvancedMarkerElementOptions.title. Atributo HTML: title="string"
zIndex	Tipo: number optional Consulta los AdvancedMarkerElementOptions.zIndex.
element readonly	Obsoleto: Usa AdvancedMarkerElement directamente. Tipo: HTMLElement Este campo es de solo lectura. Es el elemento del DOM que respalda la vista.
content	Obsoleto: Usa .children en su lugar. Tipo: Node optional Consulta los AdvancedMarkerElementOptions.content.

Métodos
addListener	addListener(eventName, handler) Parámetros: eventName: Evento observado de string. handler: Es la función Function para controlar eventos. Valor que se devuelve: Es el objeto de escucha de eventos resultante de MapsEventListener. Agrega la función de objeto de escucha determinada al nombre del evento determinado en el sistema de eventos de Maps.
Heredado: addEventListener, removeEventListener

Eventos
click	function(event) Argumentos: event: MapMouseEvent Este evento se activa cuando se hace clic en el elemento AdvancedMarkerElement. No está disponible con addEventListener() (usa gmp-click en su lugar).
drag	function(event) Argumentos: event: MapMouseEvent Este evento se activa de manera repetida mientras el usuario arrastra el AdvancedMarkerElement. No disponible con addEventListener().
dragend	function(event) Argumentos: event: MapMouseEvent Este evento se activa cuando el usuario deja de arrastrar el AdvancedMarkerElement. No disponible con addEventListener().
dragstart	function(event) Argumentos: event: MapMouseEvent Este evento se activa cuando el usuario comienza a arrastrar el AdvancedMarkerElement. No disponible con addEventListener().
gmp-click	function(event) Argumentos: event: AdvancedMarkerClickEvent Este evento se activa cuando se hace clic en el elemento AdvancedMarkerElement. Se recomienda usar con addEventListener() (en lugar de addListener()).

Interfaz AdvancedMarkerElementOptions

Interfaz google.maps.marker.AdvancedMarkerElementOptions

Son opciones para construir un AdvancedMarkerElement.

Propiedades
anchorLeft opcional	Tipo: string optional Valor predeterminado: "-50%" Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje del marcador desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado.
anchorTop opcional	Tipo: string optional Valor predeterminado: "-100%" Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje del marcador desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado.
collisionBehavior opcional	Tipo: CollisionBehavior optional Es una enumeración que especifica cómo debe comportarse un AdvancedMarkerElement cuando se superpone con otro AdvancedMarkerElement o con las etiquetas del mapa base en un mapa de vectores. Nota: La colisión de AdvancedMarkerElement con AdvancedMarkerElement funciona tanto en los mapas de tramas como en los de vectores. Sin embargo, la colisión de AdvancedMarkerElement con la etiqueta del mapa base solo funciona en los mapas de vectores.
content opcional	Tipo: Node optional La configuración predeterminada es PinElement. Es el elemento del DOM que respalda el elemento visual de un AdvancedMarkerElement. Nota: AdvancedMarkerElement no clona el elemento del DOM que se pasa. Una vez que el elemento del DOM se pasa a un AdvancedMarkerElement, si se pasa el mismo elemento del DOM a otro AdvancedMarkerElement, se moverá el elemento del DOM y el AdvancedMarkerElement anterior se verá vacío.
gmpClickable opcional	Tipo: boolean optional La configuración predeterminada es false. Si es true, se podrá hacer clic en AdvancedMarkerElement y se activará el evento gmp-click, que será interactivo para fines de accesibilidad (p.ej., para permitir la navegación con el teclado a través de las teclas de flecha).
gmpDraggable opcional	Tipo: boolean optional La configuración predeterminada es false. Si es true, se puede arrastrar el AdvancedMarkerElement. Nota: El elemento AdvancedMarkerElement con altitud no se puede arrastrar.
map opcional	Tipo: Map optional Es el mapa en el que se mostrará el AdvancedMarkerElement. El mapa es obligatorio para mostrar el AdvancedMarkerElement y se puede proporcionar configurando AdvancedMarkerElement.map si no se proporciona en la construcción.
position opcional	Tipo: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Establece la posición del AdvancedMarkerElement. Se puede construir un AdvancedMarkerElement sin una posición, pero no se mostrará hasta que se proporcione su posición, por ejemplo, a través de las acciones o elecciones de un usuario. La posición de un AdvancedMarkerElement se puede proporcionar configurando AdvancedMarkerElement.position si no se proporciona en la construcción. Nota: AdvancedMarkerElement con altitud solo se admite en los mapas de vectores.
title opcional	Tipo: string optional texto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para usar con lectores de pantalla) al AdvancedMarkerElement con el valor proporcionado.
zIndex opcional	Tipo: number optional Todos los AdvancedMarkerElement se muestran en el mapa en el orden de su zIndex, y los valores más altos se muestran delante de los AdvancedMarkerElement con valores más bajos. De forma predeterminada, los AdvancedMarkerElement se muestran según su posición vertical en la pantalla, y los AdvancedMarkerElement más bajos aparecen delante de los AdvancedMarkerElement que están más arriba en la pantalla. Mezclar marcadores con un zIndex explícito y marcadores sin uno puede generar resultados visuales inesperados. Para garantizar un comportamiento predecible, se recomienda establecer el valor de zIndex para todos los marcadores o dejarlo sin establecer. Ten en cuenta que zIndex también se usa para ayudar a determinar la prioridad relativa entre los marcadores avanzados de CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Un valor zIndex más alto indica una prioridad más alta.

Clase AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

Este evento se crea cuando se hace clic en un marcador avanzado. Accede a la posición del marcador con event.target.position.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

Clase PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

Un PinElement representa un elemento del DOM que consta de una forma y un glifo. La forma tiene el mismo estilo de globo que se ve en el AdvancedMarkerElement o Marker3DElement predeterminado. El glifo es un elemento del DOM opcional que se muestra en la forma de globo. Un PinElement puede tener una relación de aspecto diferente según su PinElement.scale.

const {PinElement} = await google.maps.importLibrary("marker");

Constructor
PinElement	PinElement([options]) Parámetros: options: PinElementOptions optional

Propiedades
background	Tipo: string optional Es el color de fondo de la forma del pin. Consulta los PinElementOptions.background.
borderColor	Tipo: string optional Es el color del borde de la forma del pin. Consulta los PinElementOptions.borderColor.
glyphColor	Tipo: string optional Es el color del glifo del pin. Consulta los PinElementOptions.glyphColor.
glyphSrc	Tipo: URL|string optional Es la fuente de la imagen del glifo que se mostrará en el pin. Consulta los PinElementOptions.glyphSrc.
glyphText	Tipo: string optional Es el texto que se muestra en el pin. Consulta los PinElementOptions.glyphText.
scale	Tipo: number optional Consulta los PinElementOptions.scale.
element readonly	Obsoleto: Usa PinElement directamente. Tipo: HTMLElement Este campo es de solo lectura. Es el elemento del DOM que respalda la vista.
glyph	Obsoleto: Usa PinElementOptions.glyphText o PinElementOptions.glyphSrc en su lugar. Tipo: string|Element|URL optional Consulta los PinElementOptions.glyph.

Métodos
Heredado: addEventListener, removeEventListener

Interfaz PinElementOptions

Interfaz google.maps.marker.PinElementOptions

Opciones para crear un PinElement.

Propiedades
background opcional	Tipo: string optional Es el color de fondo de la forma del pin. Admite cualquier valor de color de CSS.
borderColor opcional	Tipo: string optional Es el color del borde de la forma del pin. Admite cualquier valor de color de CSS.
glyph opcional	Obsoleto: Usa PinElementOptions.glyphText o PinElementOptions.glyphSrc en su lugar. Tipo: string|Element|URL optional Es el elemento del DOM que se muestra en el pin.
glyphColor opcional	Tipo: string optional Es el color del glifo. Admite cualquier valor de color de CSS.
glyphSrc opcional	Tipo: URL|string optional Es la fuente de la imagen del glifo que se mostrará en el pin.
glyphText opcional	Tipo: string optional Es el texto que se muestra en el pin.
scale opcional	Tipo: number optional La configuración predeterminada es 1. Es la escala del pin.