Marker

Clase Marker

Clase google.maps.Marker

Esta clase extiende MVCObject.

Para acceder, llama a const {Marker} = await google.maps.importLibrary("marker"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

Constructor
Marker	Marker([opts]) Parámetros:  opts:  MarkerOptions optional Argumentos opcionales con nombre Crea un marcador con las opciones especificadas. Si se especifica un mapa, el marcador se agrega al mapa en el momento de 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 máximo predeterminado que la API asignará a un marcador. Puedes definir un índice z más alto para colocar un marcador al frente.

Métodos
getAnimation	getAnimation() Parámetros: Ninguno Valor que se devuelve:  Animation|null|undefined Obtén la animación que se está ejecutando actualmente.
getClickable	getClickable() Parámetros: Ninguno Valor que se muestra:  boolean Es verdadero si se puede hacer clic en el marcador. Obtén el estado de Marker en el que se puede hacer clic.
getCursor	getCursor() Parámetros: Ninguno Valor que se devuelve:  string|null|undefined Obtén el tipo de cursor del mouse que se muestra cuando se coloca el cursor sobre un elemento.
getDraggable	getDraggable() Parámetros: Ninguno Valor que se muestra:  boolean Es verdadero si el marcador es arrastrable. Obtén el estado arrastrable de Marker.
getIcon	getIcon() Parámetros: Ninguno Valor que se devuelve:  string|Icon|Symbol|null|undefined Obtén el ícono de Marker. Consulta los MarkerOptions.icon.
getLabel	getLabel() Parámetros: Ninguno Valor que se devuelve:  MarkerLabel|string|null|undefined Obtén la etiqueta de Marker. Consulta los MarkerOptions.label.
getMap	getMap() Parámetros: Ninguno Valor que se devuelve:  Map|StreetViewPanorama Obtén el mapa o Panaroama en el que se renderiza Marker.
getOpacity	getOpacity() Parámetros: Ninguno Valor que se muestra:  number|null|undefined Es un número entre 0.0 y 1.0. Obtén la opacidad de Marker.
getPosition	getPosition() Parámetros: Ninguno Valor que se devuelve:  LatLng|null|undefined Obtén la posición de Marker.
getShape	getShape() Parámetros: Ninguno Valor que se devuelve:  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 que se devuelve:  string|null|undefined Obtén el título del cuadro de información de Marker. Consulta los MarkerOptions.title.
getVisible	getVisible() Parámetros: Ninguno Valor que se devuelve:  boolean Es verdadero si el marcador es visible. Obtén la visibilidad de Marker.
getZIndex	getZIndex() Parámetros: Ninguno Valor que se muestra:  number|null|undefined zIndex del marcador. Obtén el zIndex de Marker. Consulta los MarkerOptions.zIndex.
setAnimation	setAnimation([animation]) Parámetros:  animation:  Animation optional Es la animación que se reproducirá. Valor que se devuelve: Ninguno Inicia una animación. Se cancelarán las animaciones en curso. Por el momento, se admiten las siguientes animaciones: 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 que se devuelve: Ninguno Se establece si se puede hacer clic en Marker.
setCursor	setCursor([cursor]) Parámetros:  cursor:  string optional Tipo de cursor del mouse. Valor que se devuelve: Ninguno Establece el tipo de cursor del mouse que se muestra al colocar el cursor sobre él.
setDraggable	setDraggable(flag) Parámetros:  flag:  boolean optional Si el valor es true, se puede arrastrar el marcador. Valor que se devuelve: Ninguno Establece si el elemento Marker es arrastrable.
setIcon	setIcon([icon]) Parámetros:  icon:  string|Icon|Symbol optional Valor que se devuelve: Ninguno Establece el ícono para 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 que se devuelve: Ninguno Establece la etiqueta para Marker. Consulta los MarkerOptions.label.
setMap	setMap(map) Parámetros:  map:  Map|StreetViewPanorama Valor que se devuelve: Ninguno Renderiza el objeto 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 que se devuelve: Ninguno Configura la opacidad de Marker.
setOptions	setOptions(options) Parámetros:  options:  MarkerOptions Valor que se devuelve: Ninguno Configura las opciones para Marker.
setPosition	setPosition([latlng]) Parámetros:  latlng:  LatLng|LatLngLiteral optional Es la nueva posición. Valor que se devuelve: Ninguno Establece la publicación para Marker.
setShape	setShape([shape]) Parámetros:  shape:  MarkerShape optional Valor que se devuelve: Ninguno Establece la forma del elemento Marker que se usa para la interacción. Consulta MarkerOptions.shape y MarkerShape.
setTitle	setTitle([title]) Parámetros:  title:  string optional Valor que se devuelve: Ninguno Establece el título del cuadro de información de Marker. Consulta los MarkerOptions.title.
setVisible	setVisible(visible) Parámetros:  visible:  boolean Si el valor es true, el marcador es visible. Valor que se devuelve: Ninguno Establece si Marker es visible.
setZIndex	setZIndex([zIndex]) Parámetros:  zIndex:  number optional Valor que se devuelve: Ninguno Establece el zIndex de Marker. Consulta los MarkerOptions.zIndex.
Heredado: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

Eventos
animation_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad de la animación Marker.
click	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando se hace clic en el ícono Marker.
clickable_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad en la que se puede hacer clic Marker.
contextmenu	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando se activa el evento del menú contextual del DOM en Marker.
cursor_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad del cursor Marker.
dblclick	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando se hace doble clic en el ícono Marker.
drag	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa de manera repetida mientras el usuario arrastra el Marker.
dragend	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando el usuario deja de arrastrar Marker.
draggable_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad arrastrable Marker.
dragstart	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando el usuario comienza a arrastrar 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 del ícono Marker.
mousedown	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando se mousedown en el Marker.
mouseout	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando el mouse sale del área del ícono Marker.
mouseover	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando el mouse ingresa al área del ícono Marker.
mouseup	function(event) Argumentos:  event:  MapMouseEvent Este evento se activa para activar el mouse en el Marker.
position_changed	function() Argumentos: Ninguno Este evento se activa cuando la propiedad de posición Marker cambia.
shape_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad de la forma Marker.
title_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad del título Marker.
visible_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad visible Marker.
zindex_changed	function() Argumentos: Ninguno Este evento se activa cuando cambia la propiedad Marker zIndex.
rightclick	Obsoleto: Usa el evento Marker.contextmenu para admitir patrones de uso, como Ctrl + clic en macOS. function(event) Argumentos:  event:  MapMouseEvent Este evento se activa cuando se hace clic con el botón derecho en Marker.

MarkerOptions

Interfaz de google.maps.MarkerOptions

MarkerOptions que se utiliza para definir las propiedades que se pueden configurar en un Marker.

Propiedades
anchorPoint optional	Tipo:  Point optional El desplazamiento desde la posición del marcador hasta la punta de un elemento InfoWindow que se abrió con el marcador como ancla.
animation optional	Tipo:  Animation optional Valor predeterminado: null La animación que se reproduce cuando se agrega un marcador a un mapa
clickable optional	Tipo:  boolean optional Valor predeterminado: true Si es true, el marcador recibe eventos táctiles y del mouse.
collisionBehavior optional	Obsoleto: collisionBehavior dejó de estar disponible a partir de julio de 2023. En su lugar, usa AdvancedMarkerElement.collisionBehavior. Aviso: Solo disponible en el canal v=beta. Tipo:  string|CollisionBehavior optional Valor predeterminado: null Establece un comportamiento de colisión para los marcadores de los mapas de vectores.
crossOnDrag optional	Tipo:  boolean optional Valor predeterminado: true Si es false, inhabilita la cruz que aparece debajo del marcador al arrastrar.
cursor optional	Tipo:  string optional Valor predeterminado: pointer Tipo de cursor del mouse que se muestra al colocar el cursor sobre él.
draggable optional	Tipo:  boolean optional Valor predeterminado: false Si es true, el marcador se puede arrastrar.
icon optional	Tipo:  string|Icon|Symbol optional Ícono para el primer plano. Si se proporciona una cadena, se trata como si fuera una Icon con la cadena como url.
label optional	Tipo:  string|MarkerLabel optional Valor predeterminado: 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, pero no se proporciona MarkerOptions.title, se agregará un texto de accesibilidad (p.ej., para el uso 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 marcadores no optimizados.
map optional	Tipo:  Map|StreetViewPanorama optional Mapa en el que se mostrará el marcador Se requiere el mapa para mostrar el marcador y se puede proporcionar con Marker.setMap si no se proporciona durante la construcción del marcador.
opacity optional	Tipo:  number optional Valor predeterminado: 1.0 Un número entre 0.0, transparente, y 1.0, opaco.
optimized optional	Tipo:  boolean optional La optimización mejora el rendimiento mediante la renderización de 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.
position optional	Tipo:  LatLng|LatLngLiteral optional Establece la posición del marcador. Se puede construir un marcador, pero no se puede mostrar hasta que se proporcione su posición; por ejemplo, a través de las acciones u opciones del usuario. Se puede proporcionar la posición de un marcador con Marker.setPosition si no se proporciona durante la construcción del marcador
shape optional	Tipo:  MarkerShape optional Definición de región del mapa de imagen utilizada para arrastrar/hacer clic.
title optional	Tipo:  string optional Valor predeterminado: undefined texto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para el uso 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 marcadores no optimizados.
visible optional	Tipo:  boolean optional Valor predeterminado: true Si es true, el marcador es visible.
zIndex optional	Tipo:  number optional Todos los marcadores se muestran en el mapa en el orden de 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 inferiores aparecen delante de los que están más arriba en la pantalla.

Constantes CollisionBehavior

Constantes google.maps.CollisionBehavior

Para acceder, llama a const {CollisionBehavior} = await google.maps.importLibrary("marker"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

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

Icon.

Interfaz de google.maps.Icon

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

Propiedades
url	Tipo:  string La URL de la imagen o de la hoja de objeto.
anchor optional	Tipo:  Point optional La posición en la que se ancla una imagen en correspondencia con la ubicación del marcador en el mapa. De forma predeterminada, el ancla se ubica en el punto central de la parte inferior de la imagen.
labelOrigin optional	Tipo:  Point optional 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 optional	Tipo:  Point optional Es 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 optional	Tipo:  Size optional Es el tamaño de toda la imagen después del escalamiento, si corresponde. Usa esta propiedad para estirar o reducir una imagen o un objeto.
size optional	Tipo:  Size optional El tamaño de visualización del objeto o la imagen. Cuando usas objetos, debes especificar su tamaño. Si no se proporciona el tamaño, se establecerá cuando se cargue la imagen.

MarkerLabel

Interfaz de google.maps.MarkerLabel

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

Propiedades
text	Tipo:  string El texto que se mostrará en la etiqueta.
className optional	Tipo:  string optional Valor predeterminado: '' (string vacía) La propiedad className del elemento de la etiqueta (equivalente al atributo de clase 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 configurar mediante 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., mediante traslaciones y rotaciones) si también se utiliza la administración de colisiones de marcadores.
color optional	Tipo:  string optional Valor predeterminado: 'black' El color del texto de la etiqueta.
fontFamily optional	Tipo:  string optional Es la familia de fuentes del texto de la etiqueta (equivalente a la propiedad de familia de fuentes de CSS).
fontSize optional	Tipo:  string optional Valor predeterminado: '14px' El tamaño de fuente del texto de la etiqueta (equivalente a la propiedad de tamaño de fuente de CSS).
fontWeight optional	Tipo:  string optional El grosor de la fuente del texto de la etiqueta (equivalente a la propiedad de grosor de la fuente de CSS).

MarkerShape

Interfaz de google.maps.MarkerShape

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

Propiedades
coords	Tipo:  Array<number> El formato de este atributo depende del valor de type y sigue la especificación coords del ÁREA 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: coordenadas 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: Las coordenadas son [x1,y1,x2,y2], en las que x1,y1 son las coordenadas de la esquina superior izquierda del rectángulo y x2,y2 son las de las coordenadas inferior derecha del rectángulo.
type	Tipo:  string Describe el tipo de forma y puede ser circle, poly o rect.

Interfaz Symbol

Interfaz de google.maps.Symbol

Describe un símbolo, que consiste en una ruta vectorial con estilo. Se puede usar un símbolo como í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 de acceso SVG. Obligatorio.
anchor optional	Tipo:  Point optional Valor predeterminado: google.maps.Point(0,0) Es la posición del símbolo en relación con el marcador o la polilínea. Las coordenadas del trazado del símbolo se traducen a la izquierda y hacia arriba a través de las coordenadas x e y del ancla, respectivamente. La posición se expresa en el mismo sistema de coordenadas que la ruta del símbolo.
fillColor optional	Tipo:  string optional 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 valor 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 optional	Tipo:  number optional Valor predeterminado: 0 Opacidad de relleno del símbolo.
labelOrigin optional	Tipo:  Point optional Valor predeterminado: google.maps.Point(0,0) El origen de la etiqueta en relación con el origen de la ruta, 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 símbolos en polilíneas.
rotation optional	Tipo:  number optional Valor predeterminado: 0 El ángulo de rotación del símbolo, expresado en grados en el sentido de las manecillas del reloj. Un símbolo en una IconSequence donde fixedRotation es false se rota en relación con el ángulo del borde sobre el que se encuentra.
scale optional	Tipo:  number optional Cantidad por la cual se ajusta el tamaño del símbolo. En el caso de los símbolos de marcadores, el valor predeterminado es 1. Después del ajuste, el símbolo puede ser de cualquier tamaño. En el caso de los símbolos de una polilínea, de forma predeterminada se establece el grosor del trazo de la polilínea. Después del ajuste, el símbolo debe caber dentro de un cuadrado de 22 píxeles de tamaño centrado en el anclaje correspondiente.
strokeColor optional	Tipo:  string optional 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 valor predeterminado es "negro". En el caso de los símbolos de una polilínea, el valor predeterminado es el color del trazo de la polilínea.
strokeOpacity optional	Tipo:  number optional 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 optional	Tipo:  number optional Predeterminado: La Symbol.scale del símbolo. Grosor del trazo del símbolo.

Constantes SymbolPath

Constantes google.maps.SymbolPath

Rutas de símbolos integradas

Para acceder, llama a const {SymbolPath} = await google.maps.importLibrary("core"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

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 de cierre que apunta hacia delante
FORWARD_OPEN_ARROW	Una flecha abierta que apunta hacia delante

Constantes de animación

Constantes google.maps.Animation

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

Para acceder, llama a const {Animation} = await google.maps.importLibrary("marker"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

Constantes
BOUNCE	El marcador rebota hasta que se detiene la animación llamando a Marker.setAnimation con null.
DROP	El marcador aparecerá 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 Marker.getAnimation mostrará null. En general, este tipo de animación se especifica durante la creación del marcador.