Marker
Clase google.maps.Marker
Esta clase extiende MVCObject
.
Para acceder, llama a const {Marker} = await google.maps.importLibrary("marker")
. Consulta Bibliotecas en la API de Maps JavaScript.
Constructor | |
---|---|
Marker |
Marker([opts]) Parámetros:
Crea un marcador con las opciones especificadas. Si se especifica un mapa, este se agrega al mapa en el momento de la construcción. Ten en cuenta que la posición debe definirse para que se muestre el marcador. |
Métodos | |
---|---|
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 en el que se puede hacer clic 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 Verdadero si el marcador es arrastrable.Obtén el estado arrastrable de Marker . |
getIcon |
getIcon() Parámetros: Ninguno
Obtén el ícono de Marker . Consulta los MarkerOptions.icon . |
getLabel |
getLabel() Parámetros: Ninguno
Valor que se muestra:
MarkerLabel|null|string|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 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 muestra:
LatLng|null|undefined Obtén la posición de 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 la herramienta 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 de Marker . |
getZIndex |
getZIndex() Parámetros: Ninguno
Valor que se muestra:
number|null|undefined Index del marcador.Obtiene el zIndex de Marker . Consulta los MarkerOptions.zIndex . |
setAnimation |
setAnimation([animation]) Parámetros:
Valor que se muestra: Ninguno
Inicia una animación. Se cancelarán todas las animaciones en curso. Estas son las animaciones admitidas actualmente: Animation.BOUNCE y Animation.DROP . Si pasas null , se detendrá cualquier animación. |
setClickable |
setClickable(flag) Parámetros:
Valor que se muestra: Ninguno
Establece si se puede hacer clic en Marker . |
setCursor |
setCursor([cursor]) Parámetros:
Valor que se muestra: Ninguno
Establece el tipo de cursor del mouse que se muestra cuando se coloca el cursor sobre un elemento. |
setDraggable |
setDraggable(flag) Parámetros:
Valor que se muestra: Ninguno
Se establece si Marker es arrastrable. |
setIcon |
setIcon([icon]) Valor que se muestra: Ninguno
Establece el ícono para Marker . Consulta los MarkerOptions.icon . |
setLabel |
setLabel([label]) Parámetros:
Valor que se muestra: Ninguno
Configura la etiqueta para Marker . Consulta los MarkerOptions.label . |
setMap |
setMap(map) Parámetros:
Valor que se muestra: Ninguno
Renderiza 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:
Valor que se muestra: Ninguno
Configura 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
Configura la forma del elemento Marker que se usa para la interacción. Consulta MarkerOptions.shape y MarkerShape . |
setTitle |
setTitle([title]) Parámetros:
Valor que se muestra: Ninguno
Establece el título de la información sobre la herramienta Marker . Consulta los MarkerOptions.title . |
setVisible |
setVisible(visible) Parámetros:
Valor que se muestra: Ninguno
Se establece si Marker es visible. |
setZIndex |
setZIndex([zIndex]) Parámetros:
Valor que se muestra: Ninguno
Configura el zIndex de Marker . Consulta los MarkerOptions.zIndex . |
Heredada:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Constantes | |
---|---|
MAX_ZINDEX |
Índice z predeterminado máximo que la API asignará a un marcador. Puedes establecer un índice z más alto para colocar un marcador al frente. |
Eventos | |
---|---|
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 de Marker en la que se puede hacer clic. |
contextmenu |
function(event) Argumentos:
Este evento se activa cuando se activa el evento de 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:
Este evento se activa cuando se hace doble clic en el ícono Marker . |
drag |
function(event) Argumentos:
Este evento se activa repetidamente mientras el usuario arrastra el Marker . |
dragend |
function(event) Argumentos:
Este evento se activa cuando el usuario deja de arrastrar la Marker . |
draggable_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad arrastrable de Marker . |
dragstart |
function(event) Argumentos:
Este evento se activa cuando el usuario comienza a arrastrar la 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 un mousedown en el Marker . |
mouseout |
function(event) Argumentos:
Este evento se activa cuando el mouse abandona el área del ícono Marker . |
mouseover |
function(event) Argumentos:
Este evento se activa cuando el mouse entra en el área del ícono Marker . |
mouseup |
function(event) Argumentos:
Este evento se activa para un mouseup 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 de 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 de Marker . |
zindex_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad Marker de zIndex. |
|
function(event) Argumentos:
Este evento se activa para un clic con el botón derecho en el Marker . |
MarkerOptions
Interfaz de google.maps.MarkerOptions
El objeto MarkerOptions que se usa para definir las propiedades que se pueden establecer en un marcador
Propiedades | |
---|---|
anchorPoint optional |
Tipo:
Point optional El desplazamiento desde la posición del marcador hasta la punta de un objeto InfoWindow que se abrió con el marcador como ancla. |
animation optional |
Tipo:
Animation optional Configuración predeterminada:
null Animación que se reproducirá cuando se agregue el marcador a un mapa |
clickable optional |
Tipo:
boolean optional Configuración predeterminada:
true Si es true , el marcador recibe eventos del mouse y táctiles. |
|
Tipo:
string|CollisionBehavior optional Configuración predeterminada:
null Configura un comportamiento de colisión de los marcadores en los mapas de vectores. |
crossOnDrag optional |
Tipo:
boolean optional Configuración predeterminada:
true Si es false , inhabilita la cruz que aparece debajo del marcador cuando se arrastra. |
cursor optional |
Tipo:
string optional Configuración predeterminada:
pointer Tipo de cursor del mouse para mostrar cuando se coloca el cursor sobre un elemento. |
draggable optional |
Tipo:
boolean optional Configuración predeterminada:
false Si es true , se puede arrastrar el marcador. |
icon optional |
Ícono de primer plano. Si se proporciona una string, se trata como si fuera un Icon con la string como url . |
label optional |
Tipo:
string|MarkerLabel optional Configuración predeterminada:
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 string o un objeto MarkerLabel . Si no se proporciona, y no se proporciona MarkerOptions.title , se agregará un texto de accesibilidad (p.ej., para usarlo 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 muestra 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 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. Un marcador puede construirse, pero no mostrarse hasta que se proporcione su posición, por ejemplo, mediante las acciones o las elecciones de un usuario. Se puede proporcionar una posición de marcador con Marker.setPosition si no se proporciona durante la construcción del marcador. |
shape optional |
Tipo:
MarkerShape optional Definición de la región del mapa de imágenes utilizada para arrastrar/hacer clic. |
title optional |
Tipo:
string optional Configuración predeterminada:
undefined texto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para usarlo 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 Configuración predeterminada:
true Si es true , el marcador será visible. |
zIndex optional |
Tipo:
number optional Todos los marcadores se muestran en el mapa en el orden de su índice z, 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 marcadores más arriba de la pantalla. |
Constantes de CollisionBehavior
google.maps.CollisionBehavior
constantes
Para acceder, llama a const {CollisionBehavior} = await google.maps.importLibrary("marker")
. Consulta Bibliotecas en la API de Maps JavaScript.
Constantes | |
---|---|
OPTIONAL_AND_HIDES_LOWER_PRIORITY |
Mostrar el marcador solo si no se superpone con otros Si dos marcadores de este tipo se superponen, se mostrará el que tenga el valor 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 la colisión. Este es el comportamiento predeterminado. |
REQUIRED_AND_HIDES_OPTIONAL |
Siempre debes mostrar el marcador independientemente de la colisión, y ocultar los marcadores OPTIONAL_AND_HIDES_LOWER_PRIORITY o las etiquetas que se superpongan con el marcador. |
Icon.
Interfaz de google.maps.Icon
Estructura que representa una imagen de ícono de marcador.
Propiedades | |
---|---|
url |
Tipo:
string La URL de la hoja de imagen o del objeto. |
anchor optional |
Tipo:
Point optional Posición en la que se fijará 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 Indica 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 La posición de la imagen dentro de un objeto, si la hubiera. De forma predeterminada, el origen se encuentra en la esquina superior izquierda de la imagen (0, 0) . |
scaledSize optional |
Tipo:
Size optional El tamaño de toda la imagen después del escalamiento, si corresponde. Usa esta propiedad para estirar o contraer una imagen o un objeto. |
size optional |
Tipo:
Size optional El tamaño de visualización del objeto o 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 la apariencia de la etiqueta de un marcador. Una etiqueta de marcador es una string (con frecuencia un solo carácter) que aparece dentro del marcador. Si lo usas con un marcador personalizado, puedes cambiarlo de 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 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 establecer mediante las otras propiedades de MarkerLabel . No se deben usar las clases CSS para cambiar la posición ni la orientación de la etiqueta (p.ej., mediante traducciones y rotaciones) si también se usa la administración de colisiones de marcadores. |
color optional |
Tipo:
string optional Configuración predeterminada:
'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 Configuración predeterminada:
'14px' Es el tamaño de la 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 fuente del texto de la etiqueta (equivalente a la propiedad de grosor de fuente de CSS). |
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.
Propiedades | |
---|---|
coords |
Tipo:
Array<number> El formato de este atributo depende del valor de type y sigue la especificación de área w3 coords 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 especifica la posición de píxeles de la forma en relación con la esquina superior izquierda de la imagen objetivo. Las coordenadas dependen del valor de type , como se indica a continuación: - 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] , en el que x1,y1 son las coordenadas de la esquina superior izquierda del rectángulo y x2,y2 son las coordenadas de las coordenadas inferior derecha del rectángulo. |
type |
Tipo:
string Describe el tipo de forma y puede ser circle , poly o rect . |
Symbol
Interfaz de google.maps.Symbol
Describe un símbolo, que consiste en un trazado vectorial con estilo. Puedes usar un símbolo como el ícono de un marcador, o bien colocarlo en una polilínea.
Propiedades | |
---|---|
path |
Tipo:
SymbolPath|string La ruta del símbolo, que es una ruta integrada de un símbolo o una ruta personalizada que se expresa mediante la notación de ruta SVG. Obligatorio. |
anchor optional |
Tipo:
Point optional Configuración predeterminada:
google.maps.Point(0,0) 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 arriba mediante las coordenadas x e y del ancla, respectivamente. La posición se expresa en el mismo sistema de coordenadas que el trazado 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 marcadores de símbolos, el valor predeterminado es "black". En el caso de los símbolos de polilíneas, el valor predeterminado es el color de trazo de la polilínea correspondiente. |
fillOpacity optional |
Tipo:
number optional Configuración predeterminada:
0 La opacidad del relleno del símbolo. |
labelOrigin optional |
Tipo:
Point optional Configuración predeterminada:
google.maps.Point(0,0) Indica el origen de la etiqueta en relación con el origen de la ruta de acceso, si el marcador suministra la etiqueta. El origen se expresa en el mismo sistema de coordenadas que el trazado del símbolo. Esta propiedad no se usa para los símbolos de polilíneas. |
rotation optional |
Tipo:
number optional Configuración predeterminada:
0 El ángulo de rotación del símbolo, expresado en grados en el sentido de las manecillas del reloj. Un símbolo en un elemento IconSequence , donde fixedRotation es false , se rota en relación con el ángulo del borde sobre el cual se encuentra. |
scale optional |
Tipo:
number optional Cantidad en la que se ajusta el tamaño del símbolo En el caso de los marcadores de símbolos, 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, de forma predeterminada se aplica 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 El color de trazo del símbolo. Se admiten todos los colores CSS3, salvo aquellos con nombres extendidos. En el caso de los marcadores de símbolos, el valor predeterminado es "black". En el caso de los símbolos de una polilínea, el valor predeterminado es el color de trazo de la polilínea. |
strokeOpacity optional |
Tipo:
number optional Indica la opacidad del trazo del símbolo. En el caso de los marcadores de símbolos, el valor predeterminado es 1. En el caso de los símbolos de una polilínea, se establece de forma predeterminada la opacidad del trazo de la polilínea. |
strokeWeight optional |
Tipo:
number optional Predeterminado: El
Symbol.scale del símbolo.El grosor del trazo del símbolo. |
Constantes SymbolPath
google.maps.SymbolPath
constantes
Rutas de símbolos integradas
Para acceder, llama a const {SymbolPath} = await google.maps.importLibrary("core")
. Consulta Bibliotecas en 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 cerrada que apunta hacia delante. |
FORWARD_OPEN_ARROW |
Una flecha abierta que apunta hacia delante |
Constantes de animación
google.maps.Animation
constantes
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.
Para acceder, llama a const {Animation} = await google.maps.importLibrary("marker")
. Consulta Bibliotecas en 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 disminuye 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 . Este tipo de animación generalmente se especifica durante la creación del marcador. |