Marker (legacy)

Clase Marker

google.maps.Marker class
extends MVCObject
library "marker"

Obsoleto: A partir del 21 de febrero de 2024, dejó de estar disponible google.maps.Marker. Utilice AdvancedMarkerElement en su lugar. Por el momento, no está previsto descontinuar google.maps.Marker, pero se recomienda usar AdvancedMarkerElement en lugar de google.maps.Marker. Si bien google.maps.Marker seguirá recibiendo correcciones de errores para cualquier regresión importante, no se abordarán los errores existentes en google.maps.Marker. Se enviará una notificación al menos 12 meses antes de descontinuar la asistencia técnica. Consulta https://developers.google.com/maps/deprecations para obtener más detalles y https://developers.google.com/maps/documentation/javascript/advanced-markers/migration para acceder a la guía de migración.

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

Constructor
Marker	Marker([opts]) Parámetros: opts: MarkerOptions optional Crea un marcador con las opciones especificadas. Si se especifica un mapa, el marcador se agrega al mapa durante la construcción. Ten en cuenta que se debe establecer la posición para que se muestre el marcador.

Constantes
MAX_ZINDEX	Es el índice z predeterminado máximo que la API asignará a un marcador. Puedes establecer un índice Z más alto para que un marcador aparezca en primer plano.

Métodos
getAnimation	getAnimation() Parámetros: Ninguno Valor de retorno: Animation|null|undefined Obtiene la animación que se está ejecutando actualmente.
getClickable	getClickable() Parámetros: Ninguno Valor de retorno: boolean Verdadero si el marcador es clicable. Obtiene el estado de clic del Marker.
getCursor	getCursor() Parámetros: Ninguno Valor de retorno: string|null|undefined Obtiene el tipo de cursor del mouse que se muestra cuando se coloca sobre un elemento.
getDraggable	getDraggable() Parámetros: Ninguno Valor de retorno: boolean Verdadero si el marcador es arrastrable. Obtiene el estado de arrastre de Marker.
getIcon	getIcon() Parámetros: Ninguno Valor de retorno: string|Icon|Symbol|null|undefined Obtén el ícono de Marker. Consulta los MarkerOptions.icon.
getLabel	getLabel() Parámetros: Ninguno Valor de retorno: MarkerLabel|string|null|undefined Obtén la etiqueta del Marker. Consulta los MarkerOptions.label.
getMap	getMap() Parámetros: Ninguno Valor de retorno: Map|StreetViewPanorama|null Obtén el mapa o la panorámica en la que se renderiza el Marker.
getOpacity	getOpacity() Parámetros: Ninguno Valor de retorno: number|null|undefined Un número entre 0.0 y 1.0. Obtiene la opacidad de Marker.
getPosition	getPosition() Parámetros: Ninguno Valor de retorno: LatLng|null|undefined Obtén la posición de Marker.
getShape	getShape() Parámetros: Ninguno Valor de retorno: MarkerShape|null|undefined Obtén la forma del Marker que se usa para la interacción. Consulta MarkerOptions.shape y MarkerShape.
getTitle	getTitle() Parámetros: Ninguno Valor de retorno: string|null|undefined Obtener el título de la información sobre la herramienta de Marker. Consulta los MarkerOptions.title.
getVisible	getVisible() Parámetros: Ninguno Valor de retorno: boolean Verdadero si el marcador es visible. Obtén la visibilidad de Marker.
getZIndex	getZIndex() Parámetros: Ninguno Valor que se devuelve: Es el zIndex del marcador (number|null|undefined). Obtiene el zIndex del Marker. Consulta los MarkerOptions.zIndex.
setAnimation	setAnimation([animation]) Parámetros: animation: Animation optional Es la animación que se reproducirá. Valor de retorno: Ninguno Inicia una animación. Se cancelará cualquier animación en curso. Por el momento, las animaciones admitidas son las siguientes: Animation.BOUNCE y Animation.DROP. Si pasas null, se detendrá cualquier animación.
setClickable	setClickable(flag) Parámetros: flag: boolean Si es true, se puede hacer clic en el marcador. Valor de retorno: Ninguno Establece si se puede hacer clic en el Marker.
setCursor	setCursor([cursor]) Parámetros: cursor: Es el tipo de cursor del mouse de string optional. Valor de retorno: Ninguno Establece el tipo de cursor del mouse que se muestra cuando se coloca el cursor sobre un elemento.
setDraggable	setDraggable(flag) Parámetros: flag: boolean optional Si es true, el marcador se puede arrastrar. Valor de retorno: Ninguno Establece si el Marker se puede arrastrar.
setIcon	setIcon([icon]) Parámetros: icon: string|Icon|Symbol optional Valor de retorno: Ninguno Establece el ícono para el Marker. Consulta los MarkerOptions.icon.
setLabel	setLabel([label]) Parámetros: label: string|MarkerLabel optional La etiqueta puede ser una cadena de caracteres o un objeto MarkerLabel. Valor de retorno: Ninguno Establece la etiqueta para el Marker. Consulta los MarkerOptions.label.
setMap	setMap(map) Parámetros: map: Map|StreetViewPanorama optional Valor de retorno: Ninguno Renderiza el Marker en el mapa o la panorámica especificados. Si el mapa se establece en null, se quitará el marcador.
setOpacity	setOpacity([opacity]) Parámetros: opacity: number optional Es un número entre 0.0 (transparente) y 1.0 (opaco). Valor de retorno: Ninguno Establece la opacidad de Marker.
setOptions	setOptions(options) Parámetros: options: MarkerOptions optional Valor de retorno: Ninguno Establece las opciones para el Marker.
setPosition	setPosition([latlng]) Parámetros: latlng: LatLng|LatLngLiteral optional Es la posición nueva. Valor de retorno: Ninguno Establece la posición de Marker.
setShape	setShape([shape]) Parámetros: shape: MarkerShape optional Valor de retorno: Ninguno Establece la forma del Marker que se usa para la interacción. Consulta MarkerOptions.shape y MarkerShape.
setTitle	setTitle([title]) Parámetros: title: string optional Valor de retorno: Ninguno Establece el título de la información sobre la herramienta de Marker. Consulta los MarkerOptions.title.
setVisible	setVisible(visible) Parámetros: visible: boolean Si es true, el marcador es visible. Valor de retorno: Ninguno Se establece si el Marker es visible.
setZIndex	setZIndex([zIndex]) Parámetros: zIndex: number optional Valor de retorno: Ninguno Establece el zIndex de Marker. Consulta los MarkerOptions.zIndex.
Heredados: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

Eventos
animation_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad de animación Marker.
click	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando se hace clic en el ícono de Marker.
clickable_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad en la que se puede hacer clic de Marker.
contextmenu	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando se activa el evento contextmenu del DOM en el Marker
cursor_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad Marker del cursor.
dblclick	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando se hace doble clic en el ícono de Marker.
drag	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa de manera repetida mientras el usuario arrastra el Marker.
dragend	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando el usuario deja de arrastrar el Marker.
draggable_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad Marker arrastrable.
dragstart	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando el usuario comienza a arrastrar el Marker.
flat_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad plana Marker.
icon_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad Marker del ícono.
mousedown	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando se presiona el botón del mouse en el Marker.
mouseout	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando el mouse sale del área del ícono de Marker.
mouseover	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando el mouse ingresa al área del ícono de Marker.
mouseup	function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando se suelta el botón del mouse en el Marker.
position_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad de posición de Marker.
shape_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad de forma Marker.
title_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad de título de Marker.
visible_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad visible de Marker.
zindex_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad zIndex de Marker.
rightclick	Obsoleto: Usa el evento Marker.contextmenu en su lugar para admitir patrones de uso como Control + clic en macOS. function(event) Argumentos: event: MapMouseEvent optional Este evento se activa cuando se hace clic con el botón derecho en el Marker.

Interfaz MarkerOptions

Interfaz google.maps.MarkerOptions

Obsoleto: A partir del 21 de febrero de 2024, dejó de estar disponible google.maps.Marker. En su lugar, usa google.maps.marker.AdvancedMarkerElement. Consulta https://developers.google.com/maps/deprecations para conocer los detalles de este cambio y https://developers.google.com/maps/documentation/javascript/advanced-markers/migration para acceder a la guía de migración.

Es el objeto MarkerOptions que se usa para definir las propiedades que se pueden establecer en un marcador.

Propiedades
anchorPoint opcional	Tipo: Point optional Es el desplazamiento desde la posición del marcador hasta la punta de un InfoWindow que se abrió con el marcador como ancla.
animation opcional	Tipo: Animation optional La configuración predeterminada es null. Es la animación que se reproducirá cuando se agregue el marcador a un mapa.
clickable opcional	Tipo: boolean optional La configuración predeterminada es true. Si es true, el marcador recibe eventos táctiles y del mouse.
collisionBehavior opcional	Obsoleto: collisionBehavior dejó de estar disponible a partir de julio de 2023. En su lugar, usa AdvancedMarkerElement.collisionBehavior. Aviso: Solo está disponible en el canal beta. Tipo: string|CollisionBehavior optional La configuración predeterminada es null. Establece un comportamiento de colisión para los marcadores en los mapas de vectores.
crossOnDrag opcional	Tipo: boolean optional La configuración predeterminada es true. Si es false, inhabilita la cruz que aparece debajo del marcador cuando se arrastra.
cursor opcional	Tipo: string optional La configuración predeterminada es pointer. Es el tipo de cursor del mouse que se muestra al colocarlo sobre un elemento.
draggable opcional	Tipo: boolean optional La configuración predeterminada es false. Si es true, el marcador se puede arrastrar. Nota: Si estableces este valor en true, se podrá hacer clic en el marcador, incluso si clickable se establece en false.
icon opcional	Tipo: string|Icon|Symbol optional Ícono para el primer plano. Si se proporciona una cadena, se trata como si fuera un Icon con la cadena como url.
label opcional	Tipo: string|MarkerLabel optional La configuración predeterminada es null. Agrega una etiqueta al marcador. Una etiqueta de marcador es una letra o un número que aparecen dentro de un marcador. La etiqueta puede ser una cadena o un objeto MarkerLabel. Si se proporciona y no se proporciona MarkerOptions.title, se agregará un texto de accesibilidad (p.ej., para usar con lectores de pantalla) al marcador con el texto de la etiqueta proporcionada. Ten en cuenta que, actualmente, label solo se usa para el texto de accesibilidad de los marcadores no optimizados.
map opcional	Tipo: Map|StreetViewPanorama optional Es el mapa en el que se mostrará el marcador. El mapa es obligatorio para mostrar el marcador y se puede proporcionar con Marker.setMap si no se proporciona en la construcción del marcador.
opacity opcional	Tipo: number optional Configuración predeterminada: 1.0 Un número entre 0.0 (transparente) y 1.0 (opaco).
optimized opcional	Tipo: boolean optional La optimización mejora el rendimiento renderizando muchos marcadores como un solo elemento estático. Esto resulta útil en los casos en los que se requiere una gran cantidad de marcadores. Obtén más información sobre la optimización de marcadores. Nota: Esta optimización no tiene ningún efecto en los marcadores de los mapas de vectores.
position opcional	Tipo: LatLng|LatLngLiteral optional Establece la posición del marcador. Se puede construir un marcador, 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 marcador se puede proporcionar con Marker.setPosition si no se proporciona en la construcción del marcador.
shape opcional	Tipo: MarkerShape optional Es la definición de la región del mapa de imágenes que se usa para arrastrar o hacer clic.
title opcional	Tipo: string optional La configuración predeterminada es undefined. texto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para usar con lectores de pantalla) al marcador con el valor proporcionado. Ten en cuenta que, actualmente, title solo se usa para el texto de accesibilidad de los marcadores no optimizados.
visible opcional	Tipo: boolean optional La configuración predeterminada es true. Si es true, el marcador es visible.
zIndex opcional	Tipo: number optional Todos los marcadores se muestran en el mapa en orden según su zIndex, y los valores más altos se muestran delante de los marcadores con valores más bajos. De forma predeterminada, los marcadores se muestran según su posición vertical en la pantalla, y los marcadores más bajos aparecen delante de los que están más arriba.

Constantes de CollisionBehavior

google.maps.CollisionBehavior constantes biblioteca
"marker"

Estas constantes también se pueden usar como cadenas. En TypeScript, los literales de cadena se definen con el tipo CollisionBehaviorString.

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

Constantes
OPTIONAL_AND_HIDES_LOWER_PRIORITY	Indica que el marcador solo debe mostrarse si no se superpone con otros. Si dos marcadores de este tipo se superponen, se mostrará el que tenga el valor de zIndex más alto. Si tienen el mismo valor de zIndex, se mostrará el que tenga la posición vertical más baja en la pantalla.
REQUIRED	Indica que el marcador debe mostrarse siempre, independientemente de las superposiciones. Este es el comportamiento predeterminado.
REQUIRED_AND_HIDES_OPTIONAL	Indica que el marcador debe mostrarse siempre, independientemente de las superposiciones, y que se deben ocultar las etiquetas o los marcadores OPTIONAL_AND_HIDES_LOWER_PRIORITY que se superpongan con este.

Interfaz Icon

Interfaz google.maps.Icon

Es una estructura que representa una imagen de ícono de marcador.

Propiedades
url	Tipo: string Es la URL de la imagen o la hoja de objeto.
anchor opcional	Tipo: Point optional Es la posición en la que se debe anclar una imagen en correspondencia con la ubicación del marcador en el mapa. De forma predeterminada, el anclaje se ubica en el punto central de la parte inferior de la imagen.
labelOrigin opcional	Tipo: Point optional Es el origen de la etiqueta en relación con la esquina superior izquierda de la imagen del ícono, si el marcador proporciona una etiqueta. De forma predeterminada, el origen se encuentra en el punto central de la imagen.
origin opcional	Tipo: Point optional La posición de la imagen dentro de un objeto, si corresponde. De forma predeterminada, el origen se encuentra en la esquina superior izquierda de la imagen (0, 0).
scaledSize opcional	Tipo: Size optional Es el tamaño de toda la imagen después del escalamiento, si lo hubiera. Usa esta propiedad para estirar o encoger una imagen o un objeto.
size opcional	Tipo: Size optional Es el tamaño de visualización del objeto o la imagen. Cuando uses sprites, debes especificar su tamaño. Si no se proporciona el tamaño, se establecerá cuando se cargue la imagen.

Interfaz MarkerLabel

Interfaz google.maps.MarkerLabel

Estas opciones especifican la apariencia de una etiqueta de marcador. Una etiqueta de marcador es una cadena (a menudo, un solo carácter) que aparecerá dentro del marcador. Si la usas con un marcador personalizado, puedes cambiar su posición con la propiedad labelOrigin en la clase Icon.

Propiedades
text	Tipo: string Es el texto que se mostrará en la etiqueta.
className opcional	Tipo: string optional Configuración predeterminada: '' (cadena vacía) Es la propiedad className del elemento de la etiqueta (equivalente al atributo class del elemento). Se pueden agregar varias clases de CSS separadas por espacios. El color, el tamaño, el grosor y la familia de la fuente solo se pueden establecer a través de las otras propiedades de MarkerLabel. No se deben usar clases de CSS para cambiar la posición ni la orientación de la etiqueta (p.ej., con traslaciones y rotaciones) si también se usa la administración de colisiones de marcadores.
color opcional	Tipo: string optional La configuración predeterminada es 'black'. Es el color del texto de la etiqueta.
fontFamily opcional	Tipo: string optional Es la familia de fuentes del texto de la etiqueta (equivalente a la propiedad font-family de CSS).
fontSize opcional	Tipo: string optional La configuración predeterminada es '14px'. Es el tamaño de la fuente del texto de la etiqueta (equivalente a la propiedad font-size de CSS).
fontWeight opcional	Tipo: string optional Es el grosor de la fuente del texto de la etiqueta (equivalente a la propiedad font-weight de CSS).

Interfaz MarkerShape

Interfaz google.maps.MarkerShape

Este objeto define la región en la que se puede hacer clic de una imagen de marcador. La forma consta de dos propiedades, type y coord, que definen la región no transparente de una imagen.

Propiedades
type	Tipo: string Describe el tipo de forma y puede ser circle, poly o rect.
coords opcional	Tipo: Array<number> optional El formato de este atributo depende del valor de type y sigue la especificación de AREA coords de w3 que se encuentra en http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords. El atributo coords es un array de números enteros que especifican la posición en píxeles de la forma en relación con la esquina superior izquierda de la imagen de destino. Las coordenadas dependen del valor de type de la siguiente manera:   - circle: coords es [x1,y1,r], donde x1, y2 son las coordenadas del centro del círculo y r es el radio del círculo.   - poly: coords es [x1,y1,x2,y2...xn,yn], donde cada par x,y contiene las coordenadas de un vértice del polígono.   - rect: coords es [x1,y1,x2,y2], donde x1,y1 son las coordenadas de la esquina superior izquierda del rectángulo y x2,y2 son las coordenadas de la esquina inferior derecha del rectángulo.

Interfaz Symbol

Interfaz google.maps.Symbol

Describe un símbolo, que consiste en una ruta de vectores con diseño. Un símbolo se puede usar como el ícono de un marcador o se puede colocar en una polilínea.

Propiedades
path	Tipo: SymbolPath|string La ruta del símbolo, que es una ruta de símbolo integrada o una ruta personalizada expresada con la notación de ruta SVG. Obligatorio.
anchor opcional	Tipo: Point optional La configuración predeterminada es google.maps.Point(0,0). Es la posición del símbolo en relación con el marcador o la polilínea. Las coordenadas de la ruta del símbolo se convierten hacia la izquierda y arriba según las coordenadas X e Y del anclaje respectivamente. La posición se expresa en el mismo sistema de coordenadas que la ruta del símbolo.
fillColor opcional	Tipo: string optional Es el color de relleno del símbolo. Se admiten todos los colores CSS3, salvo aquellos con nombres extendidos. En el caso de los símbolos de marcadores, el color predeterminado es negro. En el caso de los símbolos de polilíneas, el valor predeterminado es el color del trazo de la polilínea correspondiente.
fillOpacity opcional	Tipo: number optional La configuración predeterminada es 0. La opacidad del relleno del símbolo
labelOrigin opcional	Tipo: Point optional La configuración predeterminada es google.maps.Point(0,0). Es el origen de la etiqueta en relación con el origen de la ruta de acceso, si el marcador proporciona la etiqueta. El origen se expresa en el mismo sistema de coordenadas que la ruta del símbolo. Esta propiedad no se usa para los símbolos de las polilíneas.
rotation opcional	Tipo: number optional La configuración predeterminada es 0. Es el ángulo de rotación del símbolo, expresado en grados en el sentido de las manecillas del reloj. Un símbolo en un IconSequence donde fixedRotation es false se rota en relación con el ángulo del borde sobre el cual se encuentra.
scale opcional	Tipo: number optional Es la escala de tamaño que se aplica al símbolo. En el caso de los símbolos de marcadores, el valor predeterminado es 1. Después del escalamiento, el símbolo puede ser de cualquier tamaño. En el caso de los símbolos de una polilínea, el valor predeterminado es el grosor del trazo de la polilínea. Después del escalamiento, el símbolo debe caber dentro de un cuadrado de 22 píxeles y quedar centrado en el anclaje correspondiente.
strokeColor opcional	Tipo: string optional Es el color del trazo del símbolo. Se admiten todos los colores CSS3, salvo aquellos con nombres extendidos. En el caso de los símbolos de marcadores, el color predeterminado es negro. En el caso de los símbolos de una polilínea, el color predeterminado equivale al color del trazo de la polilínea.
strokeOpacity opcional	Tipo: number optional Es la opacidad del trazo del símbolo. En el caso de los símbolos de marcadores, el valor predeterminado es 1. En el caso de los símbolos de una polilínea, el valor predeterminado es la opacidad del trazo de la polilínea.
strokeWeight opcional	Tipo: number optional Predeterminado: Es la Symbol.scale del símbolo. Es el grosor del trazo del símbolo.

Constantes de SymbolPath

google.maps.SymbolPath constantes biblioteca
"core"

Rutas de símbolos integradas.

const {SymbolPath} = await google.maps.importLibrary("core");

Constantes
BACKWARD_CLOSED_ARROW	Una flecha cerrada que apunta hacia atrás
BACKWARD_OPEN_ARROW	Una flecha abierta que apunta hacia atrás
CIRCLE	Un círculo
FORWARD_CLOSED_ARROW	Una flecha cerrada que apunta hacia delante
FORWARD_OPEN_ARROW	Una flecha abierta que apunta hacia delante

Constantes de Animation

google.maps.Animation constantes biblioteca
"marker"

Son las animaciones que se pueden reproducir en un marcador. Usa el método Marker.setAnimation en Marker o la opción MarkerOptions.animation para reproducir una animación.

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

Constantes
BOUNCE	El marcador rebota hasta que se detiene la animación llamando a Marker.setAnimation con null.
DROP	El marcador se desplaza desde la parte superior del mapa hasta su ubicación final. La animación finalizará una vez que el marcador esté en su posición, y el valor de Marker.getAnimation se revertirá a null. En general, este tipo de animación se especifica durante la creación del marcador.