Clase Map
Clase google.maps.Map
Esta clase extiende MVCObject
.
Para acceder, llama a const {Map} = await google.maps.importLibrary("maps")
. Consulta el artículo Bibliotecas de la API de Maps JavaScript.
Constructor | |
---|---|
Map |
Map(mapDiv[, opts]) Parámetros:
Crea un mapa nuevo dentro del contenedor HTML en cuestión, que suele ser un elemento DIV . |
Constantes | |
---|---|
DEMO_MAP_ID |
Es un ID de mapa que se puede usar para muestras de código que requieren un ID de mapa. Este ID de mapa no está diseñado para usarse en aplicaciones de producción y no se puede usar para funciones que requieran configuración de la nube (como el diseño de mapas basado en la nube). |
Propiedades | |
---|---|
controls |
Tipo:
Array<MVCArray<HTMLElement>> Controles adicionales para adjuntar al mapa. Para agregar un control al mapa, agrega el <div> del control al MVCArray correspondiente al ControlPosition en el que se debe renderizar. |
data |
Tipo:
Data Una instancia de Data , vinculada al mapa Agrega componentes a este objeto Data para mostrarlos de forma conveniente en este mapa. |
mapTypes |
Tipo:
MapTypeRegistry Un registro de instancias de MapType por ID de cadena. |
overlayMapTypes |
Tipos de mapas adicionales que se pueden superponer. Los tipos de mapas de superposición aparecen encima del mapa base al que se adjuntan, en el orden en que aparecen en el array overlayMapTypes (las superposiciones con valores de índices más altos se muestran encima de las superposiciones con valores de índices más bajos). |
Métodos | |
---|---|
fitBounds |
fitBounds(bounds[, padding]) Parámetros:
Valor que se muestra: Ninguno
Establece la vista del puerto para que contenga los límites determinados. Nota: Cuando el mapa se establece en display: none , la función fitBounds lee el tamaño del mapa como 0 x 0 y, por lo tanto, no realiza ninguna acción. Para cambiar el viewport mientras el mapa está oculto, configúralo en visibility: hidden , lo que garantiza que el div del mapa tenga un tamaño real. Para los mapas de vectores, este método establece la inclinación y la orientación del mapa en sus valores predeterminados de cero. Llamar a este método puede provocar una animación fluida a medida que el mapa se desplaza y acerca para ajustarse a los límites. Que este método se anime o no depende de una heurística interna. |
getBounds |
getBounds() Parámetros: Ninguno
Valor que se muestra:
LatLngBounds|undefined Son los límites de latitud y longitud del viewport actual.Muestra los límites de latitud y longitud de la ventana de visualización actual. Si se ve más de una copia del mundo, los límites varían en longitud de -180 a 180 grados inclusive. Si el mapa aún no se inicializó o no se establecieron el centro y el zoom, el resultado es undefined . Para los mapas de vectores con una inclinación o orientación distintas de cero, los límites de latitud y longitud que se muestran representan el cuadro delimitador más pequeño que incluye la región visible del viewport del mapa. Consulta MapCanvasProjection.getVisibleRegion para obtener la región visible exacta del viewport del mapa. |
getCenter |
getCenter() Parámetros: Ninguno
Valor que se muestra:
LatLng|undefined |
getClickableIcons |
getClickableIcons() Parámetros: Ninguno
Valor que se muestra:
boolean|undefined Muestra si se puede hacer clic en los íconos del mapa. Un ícono de mapa representa un lugar de interés, también conocido como lugar de interés. Si el valor que se muestra es true , se puede hacer clic en los íconos del mapa. |
getDatasetFeatureLayer |
getDatasetFeatureLayer(datasetId) Parámetros:
Valor que se muestra:
FeatureLayer Muestra el FeatureLayer para el datasetId especificado. Los IDs de los conjuntos de datos se deben configurar en la consola de Google Cloud. Si el ID del conjunto de datos no está asociado con el diseño del mapa o si el diseño basado en datos no está disponible (no hay ID de mapa, no hay mosaicos vectoriales, no hay capas de componentes ni conjuntos de datos de diseño basado en datos configurados en el diseño del mapa), se registra un error y el FeatureLayer.isAvailable resultante será falso. |
getDiv |
getDiv() Parámetros: Ninguno
Valor que se devuelve:
HTMLElement es el mapDiv del mapa. |
getFeatureLayer |
getFeatureLayer(featureType) Parámetros:
Valor que se muestra:
FeatureLayer Muestra el FeatureLayer del FeatureType específico. Se debe habilitar un FeatureLayer en la consola de Google Cloud. Si no existe un FeatureLayer del FeatureType especificado en este mapa o si el diseño basado en datos no está disponible (no hay ID de mapa, no hay mosaicos vectoriales ni FeatureLayer habilitados en el diseño del mapa), se registra un error y el FeatureLayer.isAvailable resultante será falso. |
getHeading |
getHeading() Parámetros: Ninguno
Valor que se muestra:
number|undefined Muestra la orientación de la brújula del mapa. El valor del rumbo se mide en grados (en el sentido de las manecillas del reloj) a partir de la dirección cardinal norte. Si aún no se inicializó el mapa, el resultado será undefined . |
getHeadingInteractionEnabled |
getHeadingInteractionEnabled() Parámetros: Ninguno
Valor que se muestra:
boolean|null Muestra si las interacciones de encabezado están habilitadas. Esta opción solo se aplica cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible). |
getMapCapabilities |
getMapCapabilities() Parámetros: Ninguno
Valor que se muestra:
MapCapabilities Informa al llamador sobre las funciones actuales disponibles para el mapa según el ID de mapa que se proporcionó. |
getMapTypeId |
getMapTypeId() Parámetros: Ninguno
Valor que se muestra:
MapTypeId|string|undefined |
getProjection |
getProjection() Parámetros: Ninguno
Valor que se muestra:
Projection|undefined Devuelve el Projection actual. Si el mapa aún no se inicializó, el resultado es undefined . Escucha el evento projection_changed y verifica su valor para asegurarte de que no sea undefined . |
getRenderingType |
getRenderingType() Parámetros: Ninguno
Valor que se muestra:
RenderingType Muestra el RenderingType actual del mapa. |
getStreetView |
getStreetView() Parámetros: Ninguno
Valor que se muestra:
StreetViewPanorama Es el panorama vinculado al mapa.Devuelve el StreetViewPanorama predeterminado vinculado al mapa, que puede ser una panorámica predeterminada incorporada en el mapa o la panorámica establecida con setStreetView() . Los cambios en la streetViewControl del mapa se reflejarán en la visualización de este panorama delimitado. |
getTilt |
getTilt() Parámetros: Ninguno
Valor que se muestra:
number|undefined Devuelve el ángulo de incidencia actual del mapa, en grados desde el plano del viewport hasta el plano del mapa. En el caso de los mapas de trama, el resultado será 0 para las imágenes tomadas directamente desde arriba o 45 para las imágenes a 45°. Este método no muestra el valor establecido por setTilt . Consulta setTilt para obtener más información. |
getTiltInteractionEnabled |
getTiltInteractionEnabled() Parámetros: Ninguno
Valor que se muestra:
boolean|null Muestra si las interacciones de inclinación están habilitadas. Esta opción solo está disponible cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible). |
getZoom |
getZoom() Parámetros: Ninguno
Valor que se muestra:
number|undefined Devuelve el zoom del mapa. Si no se configuró el zoom, el resultado es undefined . |
moveCamera |
moveCamera(cameraOptions) Parámetros:
Valor que se muestra: Ninguno
Establece inmediatamente la cámara del mapa en las opciones de cámara objetivo, sin animación. |
panBy |
panBy(x, y) Parámetros:
Valor que se muestra: Ninguno
Cambia el centro del mapa según la distancia especificada en píxeles. Si la distancia es menor que el ancho y la altura del mapa, la transición se animará de forma fluida. Ten en cuenta que el sistema de coordenadas del mapa aumenta de oeste a este (para los valores de x) y de norte a sur (para los valores de y). |
panTo |
panTo(latLng) Parámetros:
Valor que se muestra: Ninguno
Cambia el centro del mapa al LatLng determinado. Si el cambio es menor que el ancho y la altura del mapa, la transición se animará de forma fluida. |
panToBounds |
panToBounds(latLngBounds[, padding]) Parámetros:
Valor que se muestra: Ninguno
Desplaza el mapa por la cantidad mínima necesaria para contener el LatLngBounds determinado. No garantiza dónde estarán los límites en el mapa, excepto que se desplazará el mapa para mostrar la mayor cantidad posible de límites dentro de {currentMapSizeInPx} - {padding} . En el caso de los mapas de tramas y de vectores, no se cambiarán el zoom, la inclinación ni el rumbo del mapa. |
setCenter |
setCenter(latlng) Parámetros:
Valor que se muestra: Ninguno
|
setClickableIcons |
setClickableIcons(value) Parámetros:
Valor que se muestra: Ninguno
Controla si se puede hacer clic en los íconos del mapa. Un ícono de mapa representa un lugar de interés, también conocido como lugar de interés. Para inhabilitar la capacidad de hacer clic en los íconos del mapa, pasa un valor de false a este método. |
setHeading |
setHeading(heading) Parámetros:
Valor que se muestra: Ninguno
Establece la orientación de la brújula del mapa medida en grados a partir de la dirección cardinal norte. En el caso de los mapas de trama, este método solo se aplica a las imágenes aéreas. |
setHeadingInteractionEnabled |
setHeadingInteractionEnabled(headingInteractionEnabled) Parámetros:
Valor que se muestra: Ninguno
Establece si las interacciones de encabezado están habilitadas. Esta opción solo se aplica cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible). |
setMapTypeId |
setMapTypeId(mapTypeId) Parámetros:
Valor que se muestra: Ninguno
|
setOptions |
setOptions(options) Parámetros:
Valor que se muestra: Ninguno
|
setRenderingType |
setRenderingType(renderingType) Parámetros:
Valor que se muestra: Ninguno
Establece el RenderingType actual del mapa. |
setStreetView |
setStreetView(panorama) Parámetros:
Valor que se muestra: Ninguno
Vincula un StreetViewPanorama al mapa. Esta panorámica anula la StreetViewPanorama predeterminada, lo que permite que el mapa se vincule a una panorámica externa fuera del mapa. Si estableces el panorama en null , se vuelve a vincular el panorama incorporado predeterminado al mapa. |
setTilt |
setTilt(tilt) Parámetros:
Valor que se muestra: Ninguno
Para los mapas de vectores, establece el ángulo de incidencia del mapa. Los valores permitidos se restringen según el nivel de zoom del mapa. En el caso de los mapas de trama, controla el comportamiento de cambio automático para el ángulo de incidencia del mapa. Los únicos valores permitidos son 0 y 45 . setTilt(0) hace que el mapa siempre use una vista cenital de 0°, independientemente del nivel de zoom y la ventana de visualización. setTilt(45) hace que el ángulo de inclinación cambie automáticamente a 45 cada vez que haya imágenes a 45° disponibles para el nivel de zoom y la ventana de visualización actuales, y vuelva a 0 cuando no haya imágenes a 45° disponibles (este es el comportamiento predeterminado). Las imágenes a 45° solo están disponibles para los tipos de mapas satellite y hybrid , en algunas ubicaciones y en algunos niveles de zoom. Nota: getTilt muestra el ángulo de inclinación actual, no el valor establecido por setTilt . Debido a que getTilt y setTilt se refieren a diferentes elementos, no bind() la propiedad tilt . De lo contrario, se pueden producir efectos impredecibles. |
setTiltInteractionEnabled |
setTiltInteractionEnabled(tiltInteractionEnabled) Parámetros:
Valor que se muestra: Ninguno
Establece si se habilitan las interacciones de inclinación. Esta opción solo se aplica cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible). |
setZoom |
setZoom(zoom) Parámetros:
Valor que se muestra: Ninguno
Establece el zoom del mapa. |
Heredado:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Eventos | |
---|---|
bounds_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambian los límites del viewport. |
center_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad de centro del mapa. |
click |
function(event) Argumentos:
Este evento se activa cuando el usuario hace clic en el mapa. Se muestra un MapMouseEvent con propiedades para la ubicación en la que se hizo clic, a menos que se haya hecho clic en el ícono de un lugar, en cuyo caso se muestra un IconMouseEvent con un ID de lugar. IconMouseEvent y MapMouseEvent son idénticos, con la excepción de que IconMouseEvent tiene el campo de ID de lugar. El evento siempre se puede tratar como un MapMouseEvent cuando el ID de lugar no es importante. El evento de clic no se activa si se hizo clic en un marcador o en una ventana de información. |
contextmenu |
function(event) Argumentos:
Este evento se activa cuando se activa el evento contextmenu del DOM en el contenedor del mapa. |
dblclick |
function(event) Argumentos:
Este evento se activa cuando el usuario hace doble clic en el mapa. Ten en cuenta que, a veces, el evento de clic se activa una y otras dos veces, justo antes de este. |
drag |
function() Argumentos: Ninguno
Este evento se activa de manera repetida mientras el usuario arrastra el mapa. |
dragend |
function() Argumentos: Ninguno
Este evento se activa cuando el usuario deja de arrastrar el mapa. |
dragstart |
function() Argumentos: Ninguno
Este evento se activa cuando el usuario comienza a arrastrar el mapa. |
heading_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad de encabezado del mapa. |
idle |
function() Argumentos: Ninguno
Este evento se activa cuando el mapa queda inactivo después de desplazarse lateralmente o usar el zoom. |
isfractionalzoomenabled_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad isFractionalZoomEnabled. |
mapcapabilities_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambian las capacidades del mapa. |
maptypeid_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad mapTypeId. |
mousemove |
function(event) Argumentos:
Este evento se activa cada vez que el mouse del usuario se mueve sobre el contenedor del mapa. |
mouseout |
function(event) Argumentos:
Este evento se activa cuando el mouse del usuario sale del contenedor del mapa. |
mouseover |
function(event) Argumentos:
Este evento se activa cuando el mouse del usuario ingresa al contenedor del mapa. |
projection_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la proyección. |
renderingtype_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia el renderingType. |
tilesloaded |
function() Argumentos: Ninguno
Este evento se activa cuando terminan de cargarse las tarjetas visibles. |
tilt_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad de inclinación del mapa. |
zoom_changed |
function() Argumentos: Ninguno
Este evento se activa cuando cambia la propiedad de zoom del mapa. |
|
function(event) Argumentos:
Este evento se activa cuando el usuario hace clic con el botón derecho en el mapa. |
Interfaz MapOptions
Interfaz de google.maps.MapOptions
Es un objeto MapOptions que se usa para definir las propiedades que se pueden establecer en un mapa.
Propiedades | |
---|---|
backgroundColor optional |
Tipo:
string optional Es el color que se usa para el fondo del div del mapa. Este color será visible cuando las tarjetas aún no se hayan cargado mientras el usuario se desplaza. Esta opción solo se puede establecer cuando se inicializa el mapa. |
cameraControl optional |
Tipo:
boolean optional El estado habilitado o inhabilitado del control de la cámara. |
cameraControlOptions optional |
Tipo:
CameraControlOptions optional Las opciones de visualización del control de la cámara. |
center optional |
Tipo:
LatLng|LatLngLiteral optional El centro del mapa inicial. |
clickableIcons optional |
Tipo:
boolean optional Valor predeterminado:
true Cuando es false , no se puede hacer clic en los íconos del mapa. Un ícono de mapa representa un lugar de interés, también conocido como POI. |
colorScheme optional |
Tipo:
ColorScheme|string optional Predeterminado:
ColorScheme.LIGHT El esquema de colores inicial del mapa Esta opción solo se puede establecer cuando se inicializa el mapa. |
controlSize optional |
Tipo:
number optional Tamaño en píxeles de los controles que aparecen en el mapa. Este valor se debe proporcionar directamente cuando se crea el mapa. Si se actualiza más adelante, es posible que los controles se encuentren en un estado undefined . Solo rige los controles que realiza la API de Maps. No escala los controles personalizados creados por el desarrollador. |
disableDefaultUI optional |
Tipo:
boolean optional Habilita o inhabilita todos los botones de la IU predeterminada. Se puede anular de forma individual. No inhabilita los controles del teclado, que se controlan por separado con la opción MapOptions.keyboardShortcuts . No inhabilita los controles de gestos, que se controlan por separado con la opción MapOptions.gestureHandling . |
disableDoubleClickZoom optional |
Tipo:
boolean optional Habilita o inhabilita el zoom y el centro con doble clic. Habilitada de forma predeterminada. Nota: No se recomienda usar esta propiedad. Para inhabilitar el zoom con doble clic, puedes usar la propiedad |
|
Tipo:
boolean optional Si es false , evita que se arrastre el mapa. El arrastre está habilitado de forma predeterminada. |
draggableCursor optional |
Tipo:
string optional Es el nombre o la URL del cursor que se mostrará cuando se coloque el mouse sobre un mapa que se puede arrastrar. Esta propiedad usa el atributo cursor de CSS para cambiar el ícono. Al igual que con la propiedad css, debes especificar al menos un cursor de resguardo que no sea una URL. Por ejemplo: draggableCursor: 'url(http://www.example.com/icon.png), auto;' . |
draggingCursor optional |
Tipo:
string optional Es el nombre o la URL del cursor que se mostrará cuando se arrastre el mapa. En esta propiedad, se usa el atributo cursor de CSS para cambiar el ícono. Al igual que con la propiedad css, debes especificar al menos un cursor de resguardo que no sea una URL. Por ejemplo: draggingCursor: 'url(http://www.example.com/icon.png), auto;' . |
fullscreenControl optional |
Tipo:
boolean optional El estado habilitado o inhabilitado del control de pantalla completa. |
fullscreenControlOptions optional |
Tipo:
FullscreenControlOptions optional Las opciones de visualización para el control de pantalla completa. |
gestureHandling optional |
Tipo:
string optional Este parámetro de configuración controla cómo la API controla los gestos en el mapa. Valores permitidos:
|
heading optional |
Tipo:
number optional Es el rumbo de las imágenes aéreas en grados medidos en el sentido de las manecillas del reloj a partir del punto cardinal norte. Los encabezados se ajustan al ángulo disponible más cercano para el que hay imágenes disponibles. |
headingInteractionEnabled optional |
Tipo:
boolean optional Predeterminado:
false Si el mapa debe permitir que el usuario controle la orientación (rotación) de la cámara Esta opción solo se aplica cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible). |
isFractionalZoomEnabled optional |
Tipo:
boolean optional Predeterminado:
true para mapas vectoriales y false para mapas de tramaIndica si el mapa debe permitir niveles de zoom fraccionarios. Escucha isfractionalzoomenabled_changed para saber cuándo se estableció la configuración predeterminada. |
keyboardShortcuts optional |
Tipo:
boolean optional Si es false , impide que el teclado controle el mapa. Las combinaciones de teclas están habilitadas de forma predeterminada. |
mapId optional |
Tipo:
string optional El ID de mapa del mapa Este parámetro no se puede establecer ni cambiar después de que se crea una instancia de un mapa. Map.DEMO_MAP_ID se puede usar para probar funciones que requieren un ID de mapa, pero que no requieren la habilitación de la nube. |
mapTypeControl optional |
Tipo:
boolean optional El estado inicial habilitado o inhabilitado del control de tipo de mapa. |
mapTypeControlOptions optional |
Tipo:
MapTypeControlOptions optional Las opciones de visualización iniciales para el control de tipo de mapa. |
mapTypeId optional |
Tipo:
MapTypeId|string optional El mapTypeId de mapa inicial. La configuración predeterminada es ROADMAP . |
maxZoom optional |
Tipo:
number optional El nivel de zoom máximo que se mostrará en el mapa. Si se omite o se establece en null , se usa el zoom máximo del tipo de mapa actual. Los valores de zoom válidos son números desde cero hasta el nivel de zoom máximo admitido. |
minZoom optional |
Tipo:
number optional El nivel de zoom mínimo que se mostrará en el mapa. Si se omite o se establece en null , se usa el zoom mínimo del tipo de mapa actual. Los valores de zoom válidos son números del cero hasta el nivel de zoom máximo admitido. |
noClear optional |
Tipo:
boolean optional Si es true , no borres el contenido del div del mapa. |
|
Tipo:
boolean optional El estado habilitado/inhabilitado del control de desplazamiento lateral. |
|
Tipo:
PanControlOptions optional Las opciones de visualización del control de desplazamiento lateral. |
renderingType optional |
Tipo:
RenderingType optional Predeterminado:
RenderingType.RASTER Si el mapa debe ser de trama o vectorial Después de que se crea una instancia de un mapa, no se puede establecer ni cambiar este parámetro. Si no se establece, la configuración de la nube para el ID del mapa determinará el tipo de renderización (si está disponible). Ten en cuenta que es posible que los mapas vectoriales no estén disponibles para todos los dispositivos y navegadores, y que el mapa recurrirá a un mapa de trama según sea necesario. |
restriction optional |
Tipo:
MapRestriction optional Define un límite que restringe el área del mapa a la que pueden acceder los usuarios. Cuando se configura, un usuario solo puede desplazarse lateralmente y hacer zoom cuando la vista de la cámara permanezca dentro de los límites de los límites. |
rotateControl optional |
Tipo:
boolean optional El estado habilitado o inhabilitado del control de rotación. |
rotateControlOptions optional |
Tipo:
RotateControlOptions optional Las opciones de visualización para el control de rotación. |
scaleControl optional |
Tipo:
boolean optional Es el estado inicial habilitado o inhabilitado del control de escala. |
scaleControlOptions optional |
Tipo:
ScaleControlOptions optional Las opciones de visualización iniciales para el control de escala. |
scrollwheel optional |
Tipo:
boolean optional Si es false , inhabilita el zoom en el mapa con la rueda del mouse. La rueda de desplazamiento está habilitada de forma predeterminada. Nota: No se recomienda usar esta propiedad. Para inhabilitar el zoom con la rueda del mouse, puedes usar la propiedad |
streetView optional |
Tipo:
StreetViewPanorama optional Un StreetViewPanorama para mostrar cuando se coloca el hombrecito naranja de Street View en el mapa. Si no se especifica ningún panorama, se mostrará un StreetViewPanorama predeterminado en el div del mapa cuando se coloque el pin. |
streetViewControl optional |
Tipo:
boolean optional El estado inicial habilitado o inhabilitado del control del hombrecito naranja de Street View. Este control forma parte de la IU predeterminada y debe establecerse en false cuando se muestra un tipo de mapa en el que no debe aparecer la superposición de rutas de Street View (p.ej., un tipo de mapa que no sea de Earth). |
streetViewControlOptions optional |
Tipo:
StreetViewControlOptions optional Las opciones de visualización iniciales para el control del hombrecito naranja de Street View. |
styles optional |
Tipo:
Array<MapTypeStyle> optional Son los diseños que se aplicarán a cada uno de los tipos de mapas predeterminados. Ten en cuenta que, para los modos satellite , hybrid y terrain , estos diseños solo se aplicarán a las etiquetas y la geometría. Esta función no está disponible cuando se usa un ID de mapa o mapas vectoriales (en su lugar, usa el diseño de mapas basado en la nube). |
tilt optional |
Tipo:
number optional En el caso de los mapas de vectores, establece el ángulo de incidencia del mapa. Los valores permitidos se restringen según el nivel de zoom del mapa. En el caso de los mapas de trama, controla el comportamiento de cambio automático para el ángulo de incidencia del mapa. Los únicos valores permitidos son 0 y 45 . El valor 0 hace que el mapa siempre use una vista cenital de 0°, independientemente del nivel de zoom y la ventana de visualización. El valor 45 hace que el ángulo de inclinación cambie automáticamente a 45 cuando las imágenes a 45° estén disponibles para el nivel de zoom y viewport actuales, y vuelva a 0 cuando las imágenes a 45° no estén disponibles (este es el comportamiento predeterminado). Las imágenes a 45° solo están disponibles para los tipos de mapas satellite y hybrid , en algunas ubicaciones y en algunos niveles de zoom. Nota: getTilt muestra el ángulo de inclinación actual, no el valor especificado por esta opción. Debido a que getTilt y esta opción se refieren a diferentes elementos, no bind() la propiedad tilt . De lo contrario, se pueden producir efectos impredecibles. |
tiltInteractionEnabled optional |
Tipo:
boolean optional Predeterminado:
false Indica si el mapa debe permitir que el usuario controle la inclinación de la cámara. Esta opción solo está disponible cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible). |
zoom optional |
Tipo:
number optional Es el nivel de zoom inicial del mapa. Los valores de zoom válidos son números desde cero hasta el nivel de zoom máximo admitido. Los valores de zoom más altos corresponden a una resolución más alta. |
zoomControl optional |
Tipo:
boolean optional Es el estado habilitado o inhabilitado del control de zoom. |
zoomControlOptions optional |
Tipo:
ZoomControlOptions optional Las opciones de visualización para el control de zoom. |
Clase MapElement
Clase google.maps.MapElement
MapElement es una subclase de HTMLElement
para renderizar mapas. Después de cargar la biblioteca maps
, se puede crear un mapa en HTML. Por ejemplo:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
<button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>
De forma interna, usa
Map
, al que se puede acceder con la propiedad innerMap
.
Elemento personalizado:
<gmp-map center="lat,lng" heading-interaction-disabled map-id="string" rendering-type="vector" tilt-interaction-disabled zoom="number"></gmp-map>
Esta clase extiende HTMLElement
.
Esta clase implementa MapElementOptions
.
Para acceder, llama a const {MapElement} = await google.maps.importLibrary("maps")
. Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
---|---|
MapElement |
MapElement([options]) Parámetros:
|
Propiedades | |
---|---|
center |
Tipo:
LatLng|LatLngLiteral optional La latitud y longitud centrales del mapa.
Atributo HTML:
|
headingInteractionDisabled |
Tipo:
boolean optional Predeterminado:
false Indica si el mapa debe permitir que el usuario controle el rumbo de la cámara (rotación). Esta opción solo se aplica cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible).
Atributo HTML:
|
innerMap |
Tipo:
Map Es una referencia al Map que el MapElement usa de forma interna. |
mapId |
Tipo:
string optional El ID de mapa del mapa Este parámetro no se puede establecer ni cambiar después de que se crea una instancia de un mapa.
Map.DEMO_MAP_ID se puede usar para probar funciones que requieren un ID de mapa, pero que no requieren la habilitación de la nube.Atributo HTML:
|
renderingType |
Tipo:
RenderingType optional Predeterminado:
RenderingType.VECTOR Si el mapa debe ser de trama o vectorial Este parámetro no se puede establecer ni cambiar después de que se crea una instancia de un mapa. Si no la estableces, la configuración en la nube del ID de mapa determinará el tipo de renderización (si está disponible). Ten en cuenta que es posible que los mapas vectoriales no estén disponibles para todos los dispositivos y navegadores, y que el mapa recurrirá a un mapa de trama según sea necesario.
Atributo HTML:
|
tiltInteractionDisabled |
Tipo:
boolean optional Predeterminado:
false Indica si el mapa debe permitir que el usuario controle la inclinación de la cámara. Esta opción solo se aplica cuando el mapa es un mapa de vectores. Si no se establece en el código, se usará la configuración de nube para el ID del mapa (si está disponible).
Atributo HTML:
|
zoom |
Tipo:
number optional Es el nivel de zoom del mapa. Los valores de zoom válidos son números del cero hasta el nivel de zoom máximo admitido. Los valores de zoom más altos corresponden a una resolución más alta.
Atributo HTML:
|
Ranuras | |
---|---|
control-block-end-inline-center |
Coloca el elemento con ranura en la posición ControlPosition.BLOCK_END_INLINE_CENTER . |
control-block-end-inline-end |
Coloca el elemento con ranura en la posición ControlPosition.BLOCK_END_INLINE_END . |
control-block-end-inline-start |
Coloca el elemento con ranura en la posición ControlPosition.BLOCK_END_INLINE_START . |
control-block-start-inline-center |
Coloca el elemento con ranura en la posición ControlPosition.BLOCK_START_INLINE_CENTER . |
control-block-start-inline-end |
Coloca el elemento con ranura en la posición ControlPosition.BLOCK_START_INLINE_END . |
control-block-start-inline-start |
Coloca el elemento con ranura en la posición ControlPosition.BLOCK_START_INLINE_START . |
control-inline-end-block-center |
Coloca el elemento con ranura en la posición ControlPosition.INLINE_END_BLOCK_CENTER . |
control-inline-end-block-end |
Coloca el elemento con ranura en la posición ControlPosition.INLINE_END_BLOCK_END . |
control-inline-end-block-start |
Coloca el elemento con ranura en la posición ControlPosition.INLINE_END_BLOCK_START . |
control-inline-start-block-center |
Coloca el elemento con ranura en la posición ControlPosition.INLINE_START_BLOCK_CENTER . |
control-inline-start-block-end |
Coloca el elemento con ranura en la posición ControlPosition.INLINE_START_BLOCK_END . |
control-inline-start-block-start |
Coloca el elemento con ranura en la posición ControlPosition.INLINE_START_BLOCK_START . |
default |
Puedes crear componentes reutilizables alrededor de los componentes web de Maps JavaScript, como AdvancedMarkerElement , con elementos personalizados. De forma predeterminada, todos los elementos personalizados que se agreguen directamente a MapElement se asignarán y renderizarán en MapPanes.overlayMouseTarget . Sin embargo, es posible que los componentes web de la API de Maps JavaScript se vuelvan a colocar en las ranuras internas de MapElement . |
Métodos | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parámetros:
Valor que se muestra:
void Establece una función a la que se llamará cada vez que se publique el evento especificado en el destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parámetros:
Valor que se muestra:
void Quita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Eventos | |
---|---|
gmp-zoomchange |
function(event) Argumentos:
Este evento se activa cuando cambia la propiedad de zoom del mapa. |
Interfaz MapElementOptions
Interfaz google.maps.MapElementOptions
Es un objeto MapElementOptions que se usa para definir las propiedades que se pueden establecer en un MapElement.
Propiedades | |
---|---|
center optional |
Tipo:
LatLng|LatLngLiteral optional Consulta los MapElement.center . |
headingInteractionDisabled optional |
Tipo:
boolean optional Consulta los MapElement.headingInteractionDisabled . |
mapId optional |
Tipo:
string optional Consulta los MapElement.mapId . |
renderingType optional |
Tipo:
RenderingType optional Consulta los MapElement.renderingType . |
tiltInteractionDisabled optional |
Tipo:
boolean optional Consulta los MapElement.tiltInteractionDisabled . |
zoom optional |
Tipo:
number optional Consulta los MapElement.zoom . |
Clase ZoomChangeEvent
Clase google.maps.ZoomChangeEvent
Este evento se crea a partir de la supervisión del cambio de zoom.
Esta clase extiende Event
.
Para acceder, llama a const {ZoomChangeEvent} = await google.maps.importLibrary("maps")
. Consulta Bibliotecas de la API de Maps JavaScript.
MapTypeStyle
Interfaz de google.maps.MapTypeStyle
MapTypeStyle
es una colección de selectores y parámetros de diseño que definen cómo se debe aplicar el diseño al mapa. Los selectores especifican los componentes o elementos del mapa que deberían verse afectados, y los parámetros de diseño especifican cómo se deben modificar esos componentes y elementos. Para obtener más información, consulta la referencia de diseño.
Propiedades | |
---|---|
stylers |
Son las reglas de diseño que se aplicarán a los componentes y los elementos del mapa seleccionados. Las reglas se aplican en el orden que especifiques en este array. Para obtener lineamientos sobre el uso y los valores permitidos, consulta la referencia de diseño. |
elementType optional |
Tipo:
string optional Es el elemento al que se debe aplicar un aplicador de diseño. Un elemento es un aspecto visual de un componente del mapa. Ejemplo: una etiqueta, un ícono, el trazo o el relleno aplicado a la geometría y mucho más. Opcional. Si no se especifica elementType , se supone que el valor es 'all' . Para obtener detalles sobre el uso y los valores permitidos, consulta la referencia de diseño. |
featureType optional |
Tipo:
string optional Elemento, o grupo de elementos, al que se debe aplicar un parámetro de diseño. Opcional. Si no se especifica featureType , se supone que el valor es 'all' . Para obtener detalles sobre el uso y los valores permitidos, consulta la referencia de diseño. |
MapMouseEvent
Interfaz google.maps.MapMouseEvent
Este objeto se muestra a partir de varios eventos del mouse en el mapa y las superposiciones, y contiene todos los campos que se muestran a continuación.
Propiedades | |
---|---|
domEvent |
El evento nativo del DOM correspondiente. Los desarrolladores no deben depender de que las propiedades target , currentTarget , relatedTarget y path estén definidas y sean coherentes. Los desarrolladores tampoco deben depender de la estructura del DOM de la implementación interna de la API de Maps. Debido a la asignación de eventos internos, domEvent puede tener una semántica diferente de MapMouseEvent (p.ej., un "clic" MapMouseEvent puede tener un domEvent de tipo KeyboardEvent ). |
latLng optional |
Tipo:
LatLng optional La latitud o longitud que estaba debajo del cursor cuando ocurrió el evento. |
Métodos | |
---|---|
stop |
stop() Parámetros: Ninguno
Valor que se muestra:
void Evita que este evento se propague más. |
IconMouseEvent
Interfaz google.maps.IconMouseEvent
Este objeto se envía en un evento cuando un usuario hace clic en un ícono del mapa. El id. de sitio de este sitio se almacena en el miembro de placeId. Para evitar que se muestre la ventana de información predeterminada, llama al método stop() en este evento para evitar que se propague. Obtén más información sobre los IDs de lugar en la guía para desarrolladores de la API de Places.
Esta interfaz extiende MapMouseEvent
.
Propiedades | |
---|---|
placeId optional |
Tipo:
string optional El ID del lugar en el que se hizo clic. Este ID de lugar se puede usar para consultar más información sobre el componente en el que se hizo clic. Obtén más información sobre los IDs de lugar en la guía para desarrolladores de la API de Places. |
Heredado:
domEvent ,
latLng
|
Métodos | |
---|---|
Heredado:
stop
|
Constantes de ColorScheme
Constantes de google.maps.ColorScheme
Identificadores para los esquemas de colores de los mapas. Especifica estos valores por valor o con el nombre de la constante. Por ejemplo, 'FOLLOW_SYSTEM'
o google.maps.ColorScheme.FOLLOW_SYSTEM
.
Para acceder, llama a const {ColorScheme} = await google.maps.importLibrary("core")
. Consulta el artículo Bibliotecas de la API de Maps JavaScript.
Constantes | |
---|---|
DARK |
Es el esquema de colores oscuros de un mapa. |
FOLLOW_SYSTEM |
El esquema de colores se selecciona según las preferencias del sistema. |
LIGHT |
Es el esquema de colores claros de un mapa. Valor predeterminado para la versión heredada de Maps para JS. |
Constantes de MapTypeId
Constantes de google.maps.MapTypeId
Identificadores para tipos de mapas comunes. Especifícalos por valor o usa el nombre de la constante. Por ejemplo, 'satellite'
o google.maps.MapTypeId.SATELLITE
.
Para acceder, llama a const {MapTypeId} = await google.maps.importLibrary("maps")
. Consulta Bibliotecas de la API de Maps JavaScript.
Constantes | |
---|---|
HYBRID |
Este tipo de mapa muestra una capa transparente de las calles principales en imágenes satelitales. |
ROADMAP |
Este tipo de mapa muestra un mapa de calles normal. |
SATELLITE |
Este tipo de mapa muestra imágenes satelitales. |
TERRAIN |
Este tipo de mapa muestra mapas con características físicas, como terreno y vegetación. |
Clase MapTypeRegistry
Clase google.maps.MapTypeRegistry
Es un registro para instancias de MapType, con clave de ID de MapType.
Esta clase extiende MVCObject
.
Para acceder, llama a const {MapTypeRegistry} = await google.maps.importLibrary("maps")
. Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
---|---|
MapTypeRegistry |
MapTypeRegistry() Parámetros: Ninguno
MapTypeRegistry contiene la colección de tipos de mapas personalizados disponibles para el mapa para su uso. La API consulta este registro cuando proporciona la lista de tipos de mapas disponibles dentro de los controles, por ejemplo. |
Métodos | |
---|---|
set |
set(id, mapType) Parámetros:
Valor que se muestra: Ninguno
Establece el registro para asociar el identificador de la cadena que se pasó con el MapType pasado. |
Heredado:
addListener ,
bindTo ,
get ,
notify ,
setValues ,
unbind ,
unbindAll
|
Interfaz MapRestriction
Interfaz de google.maps.MapRestriction
Es una restricción que se puede aplicar al mapa. El viewport del mapa no superará estas restricciones.
Propiedades | |
---|---|
latLngBounds |
Cuando se configura, un usuario solo puede desplazar y acercar dentro de los límites establecidos. Los límites pueden restringir la longitud y la latitud, o solo la latitud. Para los límites de solo latitud, usa longitudes oeste y este de -180 y 180, respectivamente, por ejemplo, latLngBounds: {north: northLat, south: southLat, west: -180, east: 180} . |
strictBounds optional |
Tipo:
boolean optional Para que los límites sean más restrictivos, establece la marca strictBounds en true . Esto reduce la cantidad de zoom que puede alejar un usuario, lo que garantiza que todo lo que esté fuera de los límites restringidos permanezca oculto. El valor predeterminado es false , lo que significa que un usuario puede alejar la imagen hasta que toda el área delimitada esté a la vista, incluso las áreas que se encuentran fuera de ella. |
Clase TrafficLayer
Clase google.maps.TrafficLayer
Una capa de tráfico.
Esta clase extiende MVCObject
.
Para acceder, llama a const {TrafficLayer} = await google.maps.importLibrary("maps")
. Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
---|---|
TrafficLayer |
TrafficLayer([opts]) Parámetros:
Es una capa que muestra el tráfico actual de las rutas. |
Métodos | |
---|---|
getMap |
getMap() Parámetros: Ninguno
Valor que se muestra:
Map|null Muestra el mapa en el que se muestra esta capa. |
setMap |
setMap(map) Parámetros:
Valor que se muestra: Ninguno
Renderiza la capa en el mapa especificado. Si el mapa se establece en null , se quitará la capa. |
setOptions |
setOptions(options) Parámetros:
Valor que se muestra: Ninguno
|
Heredado:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Interfaz TrafficLayerOptions
Interfaz de google.maps.TrafficLayerOptions
Es un objeto TrafficLayerOptions que se usa para definir las propiedades que se pueden establecer en una TrafficLayer.
Propiedades | |
---|---|
autoRefresh optional |
Tipo:
boolean optional Predeterminado:
true Indica si la capa de tráfico se actualiza automáticamente con información actualizada. |
map optional |
Tipo:
Map optional Es el mapa en el que se mostrará la capa de tráfico. |
Clase TransitLayer
Clase google.maps.TransitLayer
Una capa de transporte público
Esta clase extiende MVCObject
.
Para acceder, llama a const {TransitLayer} = await google.maps.importLibrary("maps")
. Consulta el artículo Bibliotecas de la API de Maps JavaScript.
Constructor | |
---|---|
TransitLayer |
TransitLayer() Parámetros: Ninguno
Es una capa que muestra las líneas de transporte público. |
Métodos | |
---|---|
getMap |
getMap() Parámetros: Ninguno
Valor que se muestra:
Map Muestra el mapa en el que se muestra esta capa. |
setMap |
setMap(map) Parámetros:
Valor que se muestra: Ninguno
Renderiza la capa en el mapa especificado. Si el mapa se establece en null , se quitará la capa. |
Heredado:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
BicyclingLayer
Clase google.maps.BicyclingLayer
Una capa que muestra rutas y ciclovías.
Esta clase extiende MVCObject
.
Para acceder, llama a const {BicyclingLayer} = await google.maps.importLibrary("maps")
. Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
---|---|
BicyclingLayer |
BicyclingLayer() Parámetros: Ninguno
Es una capa que muestra ciclovías y senderos, y degrada las rutas grandes. |
Métodos | |
---|---|
getMap |
getMap() Parámetros: Ninguno
Valor que se muestra:
Map|null Muestra el mapa en el que se muestra esta capa. |
setMap |
setMap(map) Parámetros:
Valor que se muestra:
void Renderiza la capa en el mapa especificado. Si el mapa se establece en null , se quitará la capa. |
Heredado:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
CameraOptions
Interfaz de google.maps.CameraOptions
Se usa para configurar las opciones de la cámara del mapa.
Propiedades | |
---|---|
center optional |
Tipo:
LatLngLiteral|LatLng optional |
heading optional |
Tipo:
number optional |
tilt optional |
Tipo:
number optional |
zoom optional |
Tipo:
number optional |
Interfaz VisibleRegion
Interfaz de google.maps.VisibleRegion
Contiene los cuatro puntos que definen el polígono de cuatro lados que es la región visible del mapa. En un mapa vectorial, este polígono puede ser un trapezoide en lugar de un rectángulo cuando el mapa tiene inclinación.
Propiedades | |
---|---|
farLeft |
Tipo:
LatLng |
farRight |
Tipo:
LatLng |
latLngBounds |
Tipo:
LatLngBounds Es el cuadro de límite más pequeño que incluye la región visible. |
nearLeft |
Tipo:
LatLng |
nearRight |
Tipo:
LatLng |
Constantes de RenderingType
Constantes de google.maps.RenderingType
Para acceder, llama a const {RenderingType} = await google.maps.importLibrary("maps")
. Consulta Bibliotecas de la API de Maps JavaScript.
Constantes | |
---|---|
RASTER |
Indica que el mapa es de trama. |
UNINITIALIZED |
Indica que aún no se sabe si el mapa es vectorial o de tramas, ya que aún no se terminó de inicializar. |
VECTOR |
Indica que el mapa es de vectores. |
Interfaz MapCapabilities
Interfaz de google.maps.MapCapabilities
Es un objeto que contiene una instantánea de las funciones que están disponibles actualmente para el mapa. Ten en cuenta que esto no significa necesariamente que los módulos relevantes se carguen o inicialicen, sino que el mapa actual tiene permiso para usar estas APIs. Consulta las propiedades para obtener una lista de las capacidades posibles.
Propiedades | |
---|---|
isAdvancedMarkersAvailable optional |
Tipo:
boolean optional Si es verdadero, este mapa está configurado correctamente para permitir el uso de marcadores avanzados. Ten en cuenta que igualmente debes importar la biblioteca marker para usar marcadores avanzados. Consulta https://goo.gle/gmp-isAdvancedMarkersAvailable para obtener más información. |
isDataDrivenStylingAvailable optional |
Tipo:
boolean optional Si es verdadero, este mapa se configurará correctamente para permitir el uso de diseños basados en datos en al menos una FeatureLayer. Consulta https://goo.gle/gmp-data-driven-styling y https://goo.gle/gmp-FeatureLayerIsAvailable para obtener más información. |
isWebGLOverlayViewAvailable optional |
Tipo:
boolean optional Si es verdadero, este mapa se configurará correctamente para permitir el uso de WebGLOverlayView . |