Marker (legacy)

Clase Marker

Clase google.maps.Marker

Esta clase extiende MVCObject.

Para acceder, llama a const {Marker} = await google.maps.importLibrary("marker"). Consulta Bibliotecas de la API de Maps JavaScript.
Marker
Marker([opts])
Parámetros: 
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.
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 se muestre en primer plano.
getAnimation
getAnimation()
Parámetros:  Ninguno
Valor que se muestra:  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 clicable del Marker.
getCursor
getCursor()
Parámetros:  Ninguno
Valor que se muestra:  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 se puede arrastrar.
Obtén el estado de arrastre de Marker.
getIcon
getIcon()
Parámetros:  Ninguno
Valor que se muestra:  string|Icon|Symbol|null|undefined
Obtén el ícono de Marker. Consulta los MarkerOptions.icon.
getLabel
getLabel()
Parámetros:  Ninguno
Valor que se muestra:  MarkerLabel|string|null|undefined
Obtén la etiqueta del Marker. Consulta los MarkerOptions.label.
getMap
getMap()
Parámetros:  Ninguno
Valor que se muestra:  Map|StreetViewPanorama
Obtén el mapa o la panorámica en los que se renderiza Marker.
getOpacity
getOpacity()
Parámetros:  Ninguno
Valor que se muestra:  number|null|undefined Un número entre 0.0 y 1.0.
Obtén la opacidad del Marker.
getPosition
getPosition()
Parámetros:  Ninguno
Valor que se muestra:  LatLng|null|undefined
Obtén la posición del Marker.
getShape
getShape()
Parámetros:  Ninguno
Valor que se muestra:  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 muestra:  string|null|undefined
Obtén el título de la información sobre herramientas de Marker. Consulta los MarkerOptions.title.
getVisible
getVisible()
Parámetros:  Ninguno
Valor que se muestra:  boolean Es verdadero si el marcador es visible.
Obtén la visibilidad del Marker.
getZIndex
getZIndex()
Parámetros:  Ninguno
Valor que se muestra:  number|null|undefined zIndex del marcador.
Obtén el zIndex del Marker. Consulta los MarkerOptions.zIndex.
setAnimation
setAnimation([animation])
Parámetros: 
  • animation:  Animation optional Es la animación que se reproducirá.
Valor que se muestra:  Ninguno
Inicia una animación. Se cancelará cualquier animación en curso. Actualmente, las animaciones admitidas son 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 muestra:  Ninguno
Establece si se puede hacer clic en Marker.
setCursor
setCursor([cursor])
Parámetros: 
  • cursor:  string optional Es el tipo de cursor del mouse.
Valor que se muestra:  Ninguno
Establece el tipo de cursor del mouse que se muestra cuando se coloca el cursor sobre él.
setDraggable
setDraggable(flag)
Parámetros: 
  • flag:  boolean optional Si es true, se puede arrastrar el marcador.
Valor que se muestra:  Ninguno
Establece si se puede arrastrar Marker.
setIcon
setIcon([icon])
Parámetros: 
Valor que se muestra:  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 que se muestra:  Ninguno
Establece la etiqueta para el Marker. Consulta los MarkerOptions.label.
setMap
setMap(map)
Parámetros: 
Valor que se muestra:  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 que se muestra:  Ninguno
Establece la opacidad de Marker.
setOptions
setOptions(options)
Parámetros: 
Valor que se muestra:  Ninguno
Establece las opciones para Marker.
setPosition
setPosition([latlng])
Parámetros: 
Valor que se muestra:  Ninguno
Establece la posición para el Marker.
setShape
setShape([shape])
Parámetros: 
Valor que se muestra:  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 que se muestra:  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 que se muestra:  Ninguno
Se establece si el Marker es visible.
setZIndex
setZIndex([zIndex])
Parámetros: 
  • zIndex:  number optional
Valor que se muestra:  Ninguno
Establece el zIndex de Marker. Consulta los MarkerOptions.zIndex.
Heredado: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
animation_changed
function()
Argumentos:  Ninguno
Este evento se activa cuando cambia la propiedad de animación Marker.
click
function(event)
Argumentos: 
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 Marker en la que se puede hacer clic.
contextmenu
function(event)
Argumentos: 
Este evento se activa cuando se activa el evento contextmenu del DOM en Marker.
cursor_changed
function()
Argumentos:  Ninguno
Este evento se activa cuando cambia la propiedad del cursor Marker.
dblclick
function(event)
Argumentos: 
Este evento se activa cuando se hace doble clic en el ícono Marker.
drag
function(event)
Argumentos: 
Este evento se activa de forma repetida mientras el usuario arrastra el Marker.
dragend
function(event)
Argumentos: 
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 draggable.
dragstart
function(event)
Argumentos: 
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 del ícono Marker.
mousedown
function(event)
Argumentos: 
Este evento se activa para una acción de presionar el mouse en el Marker.
mouseout
function(event)
Argumentos: 
Este evento se activa cuando el mouse sale del área del ícono Marker.
mouseover
function(event)
Argumentos: 
Este evento se activa cuando el mouse ingresa al área del ícono Marker.
mouseup
function(event)
Argumentos: 
Este evento se activa cuando se levanta el mouse en el Marker.
position_changed
function()
Argumentos:  Ninguno
Este evento se activa cuando cambia la propiedad de posición 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 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 zIndex de Marker.
rightclick
function(event)
Argumentos: 
Este evento se activa cuando se hace clic con el botón derecho en el Marker.

Interfaz MarkerOptions

Interfaz de google.maps.MarkerOptions

Es un objeto MarkerOptions que se usa para definir las propiedades que se pueden establecer en un marcador.
anchorPoint optional
Tipo:  Point optional
Es el desplazamiento desde la posición del marcador hasta la punta de una ventana de información que se abrió con el marcador como ancla.
animation optional
Tipo:  Animation optional
Predeterminado: null
Es la animación que se reproduce cuando se agrega un marcador a un mapa.
clickable optional
Tipo:  boolean optional
Predeterminado: true
Si es true, el marcador recibe eventos táctiles y del mouse.
BetacollisionBehavior optional
Tipo:  string|CollisionBehavior optional
Predeterminado: null
Establece un comportamiento de colisión para los marcadores en los mapas de vectores.
crossOnDrag optional
Tipo:  boolean optional
Predeterminado: true
Si es false, inhabilita la cruz que aparece debajo del marcador cuando se arrastra.
cursor optional
Tipo:  string optional
Predeterminado: pointer
Es el tipo de cursor del mouse que se muestra cuando se coloca el cursor sobre un elemento.
draggable optional
Tipo:  boolean optional
Predeterminado: false
Si es true, se puede arrastrar el marcador. Nota: Si estableces este valor en true, se podrá hacer clic en el marcador, incluso si clickable está configurado en false.
icon optional
Tipo:  string|Icon|Symbol optional
Ícono del primer plano. Si se proporciona una cadena, se trata como si fuera un Icon con la cadena como url.
label optional
Tipo:  string|MarkerLabel optional
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 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 optional
Tipo:  Map|StreetViewPanorama optional
Es el mapa en el que se mostrará el marcador. El mapa es necesario para mostrar el marcador y se puede proporcionar con Marker.setMap si no se proporciona en la construcción del marcador.
opacity optional
Tipo:  number optional
Predeterminado: 1.0
Es 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. Nota: Esta optimización no tiene efecto en los marcadores de los mapas vectoriales.
position optional
Tipo:  LatLng|LatLngLiteral optional
Establece la posición del marcador. Se puede crear 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. Se puede proporcionar una posición de marcador con Marker.setPosition si no se proporciona en la construcción del marcador.
shape optional
Tipo:  MarkerShape optional
Definición de la región del mapa de imágenes que se usa para arrastrar o hacer clic.
title optional
Tipo:  string optional
Predeterminado: 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 optional
Tipo:  boolean optional
Predeterminado: true
Si es true, el marcador es visible.
zIndex optional
Tipo:  number optional
Todos los marcadores se muestran en el mapa en 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 más bajos aparecen delante de los que están más arriba en la pantalla.

Constantes de CollisionBehavior

Constantes de google.maps.CollisionBehavior

Para acceder, llama a const {CollisionBehavior} = await google.maps.importLibrary("marker"). Consulta Bibliotecas de la API de Maps JavaScript.
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 z más alto. Si tienen el mismo 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 los marcadores o las etiquetas OPTIONAL_AND_HIDES_LOWER_PRIORITY que se superpongan con él.

Interfaz de íconos

Interfaz de google.maps.Icon

Es una estructura que representa una imagen de ícono de marcador.
url
Tipo:  string
Es la URL de la imagen o la hoja de sprites.
anchor optional
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 ancla se encuentra en el punto central de la parte inferior de la imagen.
labelOrigin optional
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 optional
Tipo:  Point optional
Es la posición de la imagen dentro de un sprite, 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 contraer una imagen o un sprite.
size optional
Tipo:  Size optional
Es el tamaño de visualización del sprite o la imagen. Cuando uses sprites, debes especificar el tamaño de estos. 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 la usas con un marcador personalizado, puedes cambiar su posición con la propiedad labelOrigin en la clase Icon.
text
Tipo:  string
Es el texto que se mostrará en la etiqueta.
className optional
Tipo:  string optional
Valor predeterminado: '' (cadena 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 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 traducciones y rotaciones) si también se usa la administración de colisiones de marcadores.
color optional
Tipo:  string optional
Predeterminado: 'black'
Es 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 font-family de CSS).
fontSize optional
Tipo:  string optional
Predeterminado: '14px'
Es el tamaño de la fuente del texto de la etiqueta (equivalente a la propiedad font-size de CSS).
fontWeight optional
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 de 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.
type
Tipo:  string
Describe el tipo de forma y puede ser circle, poly o rect.
coords optional
Tipo:  Array<number> optional
El formato de este atributo depende del valor de type y sigue la especificación coords de AREA 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 de símbolo

Interfaz de google.maps.Symbol

Describe un símbolo, que consiste en una ruta de vector con diseño aplicado. Se puede usar un símbolo como ícono de un marcador o colocarlo en una polilínea.
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 optional
Tipo:  Point optional
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 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 optional
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 optional
Tipo:  number optional
Predeterminado: 0
Es la opacidad del relleno del símbolo.
labelOrigin optional
Tipo:  Point optional
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 los símbolos de polilíneas.
rotation optional
Tipo:  number optional
Predeterminado: 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 en el que fixedRotation es false se rota en relación con el ángulo del borde sobre el que se encuentra.
scale optional
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 de tamaño centrado en el anclaje correspondiente.
strokeColor optional
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 valor predeterminado es el color del trazo de la polilínea.
strokeOpacity optional
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 optional
Tipo:  number optional
Predeterminado: Es la Symbol.scale del símbolo.
Es el grosor del trazo del símbolo.

Constantes de SymbolPath

Constantes de google.maps.SymbolPath

Rutas de símbolos integradas.

Para acceder, llama a const {SymbolPath} = await google.maps.importLibrary("core"). Consulta Bibliotecas de la API de Maps JavaScript.
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 animación

Constantes de google.maps.Animation

Son 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 Bibliotecas de la API de Maps JavaScript.
BOUNCE El marcador rebota hasta que se detiene la animación llamando a Marker.setAnimation con null.
DROP El marcador cae 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. Por lo general, este tipo de animación se especifica durante la creación del marcador.