Maps

Clase Map

Clase google.maps.Map

Esta clase extiende MVCObject.

Para acceder, llama a const {Map} = await google.maps.importLibrary("maps"). Consulta Bibliotecas de la API de Maps JavaScript.
Map
Map(mapDiv[, opts])
Parámetros: 
  • mapDiv:  HTMLElement Se renderizará el mapa para completar este elemento.
  • opts:  MapOptions optional opciones
Crea un mapa nuevo dentro del contenedor HTML determinado, que suele ser un elemento DIV.
DEMO_MAP_ID Es el ID de mapa que se puede usar para las muestras de código que requieren un ID de mapa. Este ID de mapa no se diseñó para usarse en aplicaciones de producción y no se puede usar para funciones que requieren configuración en la nube (como el diseño en la nube).
controls
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
Un registro de MapType instancias por ID de string.
overlayMapTypes
Tipo:  MVCArray<MapType optional>
Tipos de mapas adicionales para superponer. Los tipos de mapas de superposición aparecen encima del mapa base al que se adjuntan, en el orden en el 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).
fitBounds
fitBounds(bounds[, padding])
Parámetros: 
  • bounds:  LatLngBounds|LatLngBoundsLiteral límites para mostrar.
  • padding:  number|Padding optional Relleno en píxeles. Los límites se ajustarán a la parte del mapa que queda después de quitar el padding. Un valor numérico generará el mismo relleno en los 4 lados. Proporciona 0 aquí para hacer un funBounds idempotente en el resultado de getBounds.
Valor que se muestra: ninguno
Configura el viewport 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. Por lo tanto, no realiza ninguna acción. Para cambiar el viewport mientras el mapa está oculto, configura el mapa en visibility: hidden y asegúrate de que el elemento div del mapa tenga un tamaño real. En el caso de 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 generar una animación fluida a medida que el mapa se desplaza lateralmente y hace zoom para ajustarse a los límites. La animación de este método depende de una heurística interna.
getBounds
getBounds()
Parámetros: Ninguno
Valor que se muestra:  LatLngBounds|undefined Los límites de latitud y longitud del viewport actual.
Muestra los límites de latitud y longitud del viewport actual. Si se puede ver más de una copia del mundo, la longitud de los límites varía entre -180 y 180 grados inclusive. Si aún no se inicializó el mapa o no se estableció 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 de límite 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
Muestra la posición que se muestra en el centro del mapa. Ten en cuenta que este objeto LatLng no está unido. Consulta LatLng para obtener más información. Si no se establecieron el centro o los límites, el resultado es undefined.
getClickableIcons
getClickableIcons()
Parámetros: Ninguno
Valor que se muestra:  boolean|undefined
Muestra la posibilidad de hacer clic en los iconos de 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 en el mapa.
BetagetDatasetFeatureLayer
getDatasetFeatureLayer(datasetId)
Parámetros: 
  • datasetId:  string
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 estilo de mapa del mapa o si el diseño basado en datos no está disponible (no hay ID de mapa, mosaicos vectoriales ni capas de elementos de diseño basado en datos o conjuntos de datos configurados en el estilo de mapa), se registra un error, y el FeatureLayer.isAvailable resultante será falso.
getDiv
getDiv()
Parámetros: Ninguno
Valor que se muestra:  HTMLElement 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 un FeatureLayer del FeatureType especificado no existe en este mapa o si el diseño basado en datos no está disponible (no hay un ID de mapa, ningún mosaico de vectores ni un FeatureLayer habilitado en el diseño de 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 del mapa según la brújula. El valor de orientación se mide en grados (en el sentido de las manecillas del reloj) a partir de la dirección cardinal hacia el norte. Si aún no se inicializó el mapa, el resultado es undefined.
getMapCapabilities
getMapCapabilities()
Parámetros: Ninguno
Valor que se muestra:  MapCapabilities
Informa al emisor de las capacidades 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
Muestra el Projection actual. Si aún no se inicializó el mapa, 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 objeto RenderingType actual del mapa.
getStreetView
getStreetView()
Parámetros: Ninguno
Valor que se muestra:  StreetViewPanorama Es la panorámica vinculada al mapa.
Muestra el objeto StreetViewPanorama predeterminado vinculado al mapa, que puede ser una panorámica predeterminada incorporada en el mapa, o la panorámica establecida mediante setStreetView(). Los cambios en el objeto streetViewControl del mapa se reflejarán en la visualización de esa panorámica vinculada.
getTilt
getTilt()
Parámetros: Ninguno
Valor que se muestra:  number|undefined
Muestra 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 tramas, 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.
getZoom
getZoom()
Parámetros: Ninguno
Valor que se muestra:  number|undefined
Muestra 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 la cámara de destino, sin animación.
panBy
panBy(x, y)
Parámetros: 
  • x:  number Cantidad de píxeles para mover el mapa en la dirección x.
  • y:  number Cantidad de píxeles para mover el mapa en la dirección y.
Valor que se muestra: ninguno
Cambia el centro del mapa según la distancia determinada en píxeles. Si la distancia es inferior tanto al ancho como a la altura del mapa, la transición se animará de manera fluida. Ten en cuenta que el sistema de coordenadas del mapa aumenta de oeste a este (para valores x) y de norte a sur (para valores y).
panTo
panTo(latLng)
Parámetros: 
Valor que se muestra: ninguno
Cambia el centro del mapa por el LatLng determinado. Si el cambio es inferior tanto al ancho como a la altura del mapa, la transición se animará de manera fluida.
panToBounds
panToBounds(latLngBounds[, padding])
Parámetros: 
  • latLngBounds:  LatLngBounds|LatLngBoundsLiteral Son los límites hacia los que se debe desplazar el mapa.
  • padding:  number|Padding optional Relleno en píxeles. Un valor numérico generará el mismo relleno en los 4 lados. El valor predeterminado es 0.
Valor que se muestra: ninguno
Desplaza el mapa por la cantidad mínima necesaria para que contenga el LatLngBounds determinado. No se garantiza en qué lugar del mapa estarán los límites, excepto que se desplazará el mapa para mostrar la mayor cantidad de límites posible dentro de {currentMapSizeInPx} - {padding}. Tanto en los mapas de trama como en los de vectores, no se modificarán el zoom, la inclinación ni la orientación del mapa.
setCenter
setCenter(latlng)
Parámetros: 
Valor que se muestra: ninguno
setClickableIcons
setClickableIcons(value)
Parámetros: 
  • value:  boolean
Valor que se muestra: ninguno
Controla si se puede hacer clic en los íconos de mapa o no. Un ícono de mapa representa un lugar de interés, también conocido como lugar de interés. Para inhabilitar la posibilidad de hacer clics en los íconos de mapa, pasa un valor de false a este método.
setHeading
setHeading(heading)
Parámetros: 
  • heading:  number
Valor que se muestra: ninguno
Establece la orientación según la brújula del mapa medida en grados a partir de la dirección cardinal hacia el norte. En el caso de los mapas de tramas, este método solo se aplica a imágenes aéreas.
setMapTypeId
setMapTypeId(mapTypeId)
Parámetros: 
Valor que se muestra: ninguno
setOptions
setOptions(options)
Parámetros: 
Valor que se muestra: ninguno
setStreetView
setStreetView(panorama)
Parámetros: 
  • panorama:  StreetViewPanorama optional Es la panorámica que se desea vincular al mapa.
Valor que se muestra: ninguno
Vincula un StreetViewPanorama con el mapa. Esta panorámica anula el StreetViewPanorama predeterminado, lo que permite que el mapa se vincule a una panorámica externa fuera del mapa. Si estableces la panorámica en null, la panorámica incorporada predeterminada volverá al mapa.
setTilt
setTilt(tilt)
Parámetros: 
  • tilt:  number
Valor que se muestra: ninguno
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 tramas, 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 aérea de 0°, independientemente del nivel de zoom y el viewport. setTilt(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 el viewport actuales, y vuelve 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 con algunos niveles de zoom. Nota: getTilt muestra el ángulo de inclinación actual, no el valor establecido por setTilt. Dado que getTilt y setTilt hacen referencia a elementos diferentes, no uses bind() en la propiedad tilt. Si lo haces, es posible que se produzcan efectos impredecibles.
setZoom
setZoom(zoom)
Parámetros: 
  • zoom:  number Los valores de zoom más altos corresponden a una resolución más alta.
Valor que se muestra: ninguno
Establece el zoom del mapa.
Heredado: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
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 del 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 un ícono de lugar, en cuyo caso se muestra un IconMouseEvent con un ID de lugar. IconMouseEvent y MapMouseEvent son idénticos, excepto que IconMouseEvent tiene el campo de ID de lugar. El evento siempre se puede tratar como un MapMouseEvent cuando el ID del lugar no es importante. El evento de clic no se activa si se hace clic en un marcador o en una ventana de información.
contextmenu
function(event)
Argumentos: 
Este evento se activa cuando se activa el evento de menú contextual 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 activará una y otras veces 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 desplaza sobre el contenedor del mapa.
mouseout
function(event)
Argumentos: 
Este evento se activa cuando el usuario sale del contenedor del mapa.
mouseover
function(event)
Argumentos: 
Este evento se activa cuando el usuario ingresa el mouse en el 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 renderType.
tilesloaded
function()
Argumentos: Ninguno
Este evento se activa cuando los mosaicos visibles terminan de cargarse.
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.
rightclick
function(event)
Argumentos: 
Este evento se activa cuando el usuario hace clic con el botón derecho en el mapa.

MapOptions

Interfaz google.maps.MapOptions

MapOptions que se usa para definir las propiedades que se pueden configurar en un mapa.
backgroundColor optional
Tipo:  string optional
Color utilizado para el fondo del elemento div del mapa. Este color será visible cuando aún no se hayan cargado los mosaicos mientras el usuario se desplaza lateralmente. Esta opción solo se puede establecer cuando se inicializa el mapa.
center optional
Tipo:  LatLng|LatLngLiteral optional
El centro inicial del mapa.
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 lugar de interés.
controlSize optional
Tipo:  number optional
Indica el 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 tarde, es posible que los controles pasen al estado undefined. Solo rige los controles que implementa la API de Google Maps. No escala los controles personalizados creados por el desarrollador.
disableDefaultUI optional
Tipo:  boolean optional
Habilita o inhabilita todos los botones de IU predeterminados. Se puede anular de forma individual. No inhabilita los controles del teclado, que se controlan de forma independiente con la opción MapOptions.keyboardShortcuts. No inhabilita los controles por gestos, que la opción MapOptions.gestureHandling controla por separado.
disableDoubleClickZoom optional
Tipo:  boolean optional
Habilita o inhabilita el zoom y centrar al hacer doble clic. Habilitada de forma predeterminada.

Nota: Esta propiedad no se recomienda. Para inhabilitar el zoom al hacer doble clic, puedes usar la propiedad gestureHandling y establecerla en "none".
draggable optional
Tipo:  boolean optional
Si es false, evita que se arrastre el mapa. La función de arrastrar está habilitada de forma predeterminada.
draggableCursor optional
Tipo:  string optional
El nombre o la URL del cursor que se mostrará al desplazar el mouse sobre un mapa arrastrable. 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
El nombre o la URL del cursor que se mostrará al arrastrar el mapa. 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: 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 del control de pantalla completa.
gestureHandling optional
Tipo:  string optional
Este parámetro de configuración controla la manera en que la API controla los gestos en el mapa. Valores permitidos:
  • "cooperative": Los eventos de desplazamiento y los gestos táctiles con un dedo permiten desplazarse por la página, sin hacer zoom ni desplazarse lateralmente por el mapa. Los gestos táctiles con dos dedos te permiten desplazar lateralmente y acercar o alejar el mapa. Desplázate por los eventos con la tecla Ctrl o la tecla ⌘ presionada para hacer zoom en el mapa.
    En este modo, el mapa coopera con la página.
  • "greedy": Todos los gestos táctiles y eventos de desplazamiento desplazan el mapa o hacen zoom en él.
  • "none": No se puede desplazar lateralmente el mapa ni acercarlo o alejarlo mediante gestos del usuario.
  • "auto" (predeterminado): El control gestual es cooperativo o voraz, en función de si la página es desplazable o está en un iframe.
heading optional
Tipo:  number optional
Corresponde a la orientación de las imágenes aéreas en grados medidos en sentido horario a partir de la dirección cardinal hacia el norte. Los encabezados se ajustan al ángulo disponible más cercano para el cual hay imágenes disponibles.
isFractionalZoomEnabled optional
Tipo:  boolean optional
Predeterminado: true para mapas de vectores y false para mapas de trama
Indica si el mapa debe admitir 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, evita que el teclado controle el mapa. Las combinaciones de teclas están habilitadas de forma predeterminada.
mapId optional
Tipo:  string optional
Indica el ID de mapa del mapa. No se puede establecer ni cambiar este parámetro después de que se crea una instancia de un mapa.
mapTypeControl optional
Tipo:  boolean optional
Es el estado inicial habilitado o inhabilitado del control de tipo de mapa.
mapTypeControlOptions optional
Tipo:  MapTypeControlOptions optional
Son las opciones de visualización iniciales del control de tipo de mapa.
mapTypeId optional
Tipo:  MapTypeId|string optional
El mapTypeId 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 desde cero hasta el nivel de zoom máximo admitido.
noClear optional
Tipo:  boolean optional
Si el valor es true, no borres el contenido del elemento div del mapa.
panControl optional
Tipo:  boolean optional
El estado habilitado o inhabilitado del control de desplazamiento lateral.

panControlOptions optional
Tipo:  PanControlOptions optional
Opciones de visualización del control de desplazamiento lateral.

restriction optional
Tipo:  MapRestriction optional
Define un límite que restringe el área del mapa a la que pueden acceder los usuarios. Si la estableces, los usuarios solo podrán desplazarse lateralmente y hacer zoom mientras la vista de la cámara permanezca dentro de los límites del límite.
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 del control de rotación.
scaleControl optional
Tipo:  boolean optional
El estado inicial habilitado o inhabilitado del control de báscula.
scaleControlOptions optional
Tipo:  ScaleControlOptions optional
Opciones de visualización iniciales para el control de escala.
scrollwheel optional
Tipo:  boolean optional
Si el valor es false, se inhabilita el zoom en el mapa mediante la rueda del mouse. La rueda de desplazamiento está habilitada de forma predeterminada.

Nota: Esta propiedad no se recomienda. Para inhabilitar el zoom con la rueda de desplazamiento, puedes usar la propiedad gestureHandling y establecerla en "cooperative" o "none".
streetView optional
Tipo:  StreetViewPanorama optional
Un objeto StreetViewPanorama que se muestra cuando se coloca el hombrecito naranja en el mapa Si no se especifica una panorámica, se mostrará un StreetViewPanorama predeterminado en el div del mapa cuando se suelte el hombrecito naranja.
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 configurarse en false al mostrar 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 es Earth).
streetViewControlOptions optional
Tipo:  StreetViewControlOptions optional
Opciones de visualización iniciales para el control del hombrecito naranja de Street View.
styles optional
Tipo:  Array<MapTypeStyle> optional
Diseños que se aplicarán a cada uno de los tipos de mapas predeterminados. Ten en cuenta que en los modos satellite/hybrid y terrain, estos estilos solo se aplicarán a las etiquetas y la geometría.
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 tramas, 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 aérea de 0°, independientemente del nivel de zoom y del viewport. 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 el viewport actuales, y vuelve 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 con algunos niveles de zoom. Nota: getTilt muestra el ángulo de inclinación actual, no el valor especificado en esta opción. Debido a que getTilt y esta opción hacen referencia a cosas diferentes, no bind() la propiedad tilt. Hacerlo puede generar efectos impredecibles.
zoom optional
Tipo:  number optional
El nivel inicial de zoom 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 mayores corresponden a una resolución más alta.
zoomControl optional
Tipo:  boolean optional
El estado habilitado o inhabilitado del control de zoom.
zoomControlOptions optional
Tipo:  ZoomControlOptions optional
Las opciones de visualización del 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" map-id="string" 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.
center
Tipo:  LatLng|LatLngLiteral optional
La latitud/longitud central del mapa.
Atributo HTML:
  • <gmp-map center="lat,lng"></gmp-map>
innerMap
Tipo:  Map
Es una referencia al Map que el MapElement usa internamente.
mapId
Tipo:  string optional
Indica el ID de mapa del mapa. Consulta la documentación sobre los ID de mapa para obtener más información.
Atributo HTML:
  • <gmp-map map-id="string"></gmp-map>
zoom
Tipo:  number optional
El nivel de zoom del mapa.
Atributo HTML:
  • <gmp-map zoom="number"></gmp-map>
control-block-end-inline-center
Coloca el elemento ranurado en la posición ControlPosition.BLOCK_END_INLINE_CENTER.
control-block-end-inline-end
Coloca el elemento ranurado en la posición ControlPosition.BLOCK_END_INLINE_END.
control-block-end-inline-start
Coloca el elemento ranurado en la posición ControlPosition.BLOCK_END_INLINE_START.
control-block-start-inline-center
Coloca el elemento ranurado en la posición ControlPosition.BLOCK_START_INLINE_CENTER.
control-block-start-inline-end
Coloca el elemento ranurado en la posición ControlPosition.BLOCK_START_INLINE_END.
control-block-start-inline-start
Coloca el elemento ranurado en la posición ControlPosition.BLOCK_START_INLINE_START.
control-inline-end-block-center
Coloca el elemento ranurado en la posición ControlPosition.INLINE_END_BLOCK_CENTER.
control-inline-end-block-end
Coloca el elemento ranurado en la posición ControlPosition.INLINE_END_BLOCK_END.
control-inline-end-block-start
Coloca el elemento ranurado en la posición ControlPosition.INLINE_END_BLOCK_START.
control-inline-start-block-center
Coloca el elemento ranurado en la posición ControlPosition.INLINE_START_BLOCK_CENTER.
control-inline-start-block-end
Coloca el elemento ranurado en la posición ControlPosition.INLINE_START_BLOCK_END.
control-inline-start-block-start
Coloca el elemento ranurado en la posición ControlPosition.INLINE_START_BLOCK_START.
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Configura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject Es el objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Ver las opciones
Valor que se muestra:  void
Elimina del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.
gmp-zoomchange
function(event)
Argumentos: 
Este evento se activa cuando cambia la propiedad de zoom del mapa.

MapElementOptions

Interfaz google.maps.MapElementOptions

MapElementOptions que se usa para definir las propiedades que se pueden configurar en un MapElement.
center optional
Tipo:  LatLng|LatLngLiteral optional
El centro inicial del mapa.
mapId optional
Tipo:  string optional
Indica el ID de mapa del mapa. No se puede establecer ni cambiar este parámetro después de que se crea una instancia de un mapa.
zoom optional
Tipo:  number optional
El nivel inicial de zoom 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 mayores corresponden a una resolución más alta.

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 google.maps.MapTypeStyle

MapTypeStyle es una colección de selectores y parámetros de diseño que definen el diseño que se le debe dar al mapa. Los selectores especifican los elementos o los elementos del mapa que deben verse afectados, y los parámetros de diseño especifican cómo se deben modificar dichos elementos y elementos. Para obtener más detalles, consulta la referencia de estilo.
stylers
Tipo:  Array<Object>
Las reglas de estilo que se aplicarán a los componentes y elementos del mapa seleccionados. Las reglas se aplican en el orden que especifiques en este array. Para conocer los lineamientos sobre el uso y los valores permitidos, consulta la referencia de estilo.
elementType optional
Tipo:  string optional
Elemento al que se debe aplicar un parámetro de diseño. Un elemento es un aspecto visual de una característica en el mapa. Por 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 estilo.
featureType optional
Tipo:  string optional
El componente o el grupo de componentes 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 estilo.

MapMouseEvent

Interfaz google.maps.MapMouseEvent

Este objeto se devuelve de varios eventos del mouse en el mapa y las superposiciones, y contiene todos los campos que aparecen a continuación.
domEvent
El evento nativo del DOM correspondiente. Los desarrolladores no deben confiar en que las propiedades target, currentTarget, relatedTarget y path se definan y sean coherentes. Los desarrolladores no deben confiar también en la estructura de DOM de la implementación interna de la Google Maps API. Debido a la asignación de eventos interna, es posible que domEvent tenga una semántica diferente de la MapMouseEvent (p.ej., un "clic" de MapMouseEvent puede tener un domEvent de tipo KeyboardEvent).
latLng optional
Tipo:  LatLng optional
La latitud o la longitud que se encontraba debajo del cursor cuando ocurrió el evento.
stop
stop()
Parámetros: Ninguno
Valor que se muestra:  void
Evita que este evento se propague aún 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 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.

placeId optional
Tipo:  string optional
Es 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 elemento 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.
Heredada: domEvent, latLng
Heredada: stop

Constantes MapTypeId

Constantes google.maps.MapTypeId

Identificadores de MapTypes comunes. Especifícalas por valor o mediante 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.
HYBRID Este tipo de mapa muestra una capa transparente de las principales calles 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 el terreno y la vegetación.

Clase MapTypeRegistry

Clase google.maps.MapTypeRegistry

Un registro para instancias de MapType, con clave por el 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.
MapTypeRegistry
MapTypeRegistry()
Parámetros: Ninguno
MapTypeRegistry contiene la colección de tipos de mapas personalizados disponibles en el mapa para su uso. Por ejemplo, la API consulta este registro cuando proporciona la lista de tipos de mapas disponibles dentro de los controles.
set
set(id, mapType)
Parámetros: 
  • id:  string Es el identificador del MapType que se agregará al registro.
  • mapType:  Es un objeto MapType MapType|* que se agregará al registro.
Valor que se muestra: ninguno
Configura el registro para asociar el identificador de string pasado con el MapType pasado.
Heredado: addListener, bindTo, get, notify, setValues, unbind, unbindAll

MapRestriction

Interfaz google.maps.MapRestriction

Una restricción que se puede aplicar al mapa. El viewport del mapa no superará estas restricciones.
latLngBounds
Cuando se configura, un usuario solo puede desplazarse lateralmente y hacer zoom dentro de los límites determinados. Los límites pueden restringir la longitud y la latitud, o solo la latitud. En el caso de los límites solo de latitud, se usan 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
Se pueden hacer más restrictivos los límites si configuras la marca strictBounds como true. Esto reduce la distancia que un usuario puede alejar, lo que garantiza que todo fuera de los límites restringidos permanezca oculto. El valor predeterminado es false, lo que significa que un usuario puede alejar el mapa hasta que se vea toda el área limitada, incluidas las áreas que están fuera del área limitada.

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.
TrafficLayer
TrafficLayer([opts])
Parámetros: 
Una capa que muestra el tráfico actual en la ruta.
getMap
getMap()
Parámetros: Ninguno
Valor que se muestra:  Map
Muestra el mapa en el que aparece 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

TrafficLayerOptions

Interfaz google.maps.TrafficLayerOptions

TrafficLayerOptions que se usa para definir las propiedades que se pueden configurar en un TrafficLayer.
autoRefresh optional
Tipo:  boolean optional
Valor predeterminado: true
Si la capa de tráfico se actualiza automáticamente con la información actualizada
map optional
Tipo:  Map optional
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 Bibliotecas de la API de Maps JavaScript.
TransitLayer
TransitLayer()
Parámetros: Ninguno
Es una capa que muestra las líneas de transporte público.
getMap
getMap()
Parámetros: Ninguno
Valor que se muestra:  Map
Muestra el mapa en el que aparece 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 ciclovías y senderos.

Esta clase extiende MVCObject.

Para acceder, llama a const {BicyclingLayer} = await google.maps.importLibrary("maps"). Consulta Bibliotecas de la API de Maps JavaScript.
BicyclingLayer
BicyclingLayer()
Parámetros: Ninguno
Una capa que muestra ciclovías y rutas, y desciende de nivel las rutas grandes.
getMap
getMap()
Parámetros: Ninguno
Valor que se muestra:  Map
Muestra el mapa en el que aparece 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

CameraOptions

Interfaz google.maps.CameraOptions

Se usa para configurar las opciones de cámara del mapa.
center optional
Tipo:  LatLngLiteral|LatLng optional
heading optional
Tipo:  number optional
tilt optional
Tipo:  number optional
zoom optional
Tipo:  number optional

VisibleRegion.

Interfaz google.maps.VisibleRegion

Contiene los cuatro puntos que definen el polígono de cuatro lados que constituye la región visible del mapa. En un mapa vectorial, este polígono puede ser un trapecio en lugar de un rectángulo cuando la inclinación de un mapa vectorial es superior.
farLeft
Tipo:  LatLng
farRight
Tipo:  LatLng
latLngBounds
Tipo:  LatLngBounds
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 google.maps.RenderingType

Para acceder, llama a const {RenderingType} = await google.maps.importLibrary("maps"). Consulta Bibliotecas de la API de Maps JavaScript.
RASTER Indica que el mapa es de trama.
UNINITIALIZED Indica que aún se desconoce si el mapa es vectorial o de trama porque todavía no se terminó de inicializar el mapa.
VECTOR Indica que el mapa es un mapa de vectores.

MapCapabilities

Interfaz google.maps.MapCapabilities

Objeto que contiene una instantánea de las capacidades que están disponibles actualmente para el mapa. Ten en cuenta que esto no significa necesariamente que se cargan o inicializan los módulos relevantes, sino que el mapa actual tiene permiso para usar estas API. Consulta las propiedades para obtener una lista de las funciones posibles.
isAdvancedMarkersAvailable optional
Tipo:  boolean optional
Si es "true", este mapa se configura correctamente para permitir el uso de Marcadores avanzados. Ten en cuenta que, de todas formas, debes importar la biblioteca marker para poder 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 configura correctamente para permitir el uso de diseño basado en datos para al menos un FeatureLayer. Consulta https://goo.gle/gmp-data-driven-styling y https://goo.gle/gmp-FeatureLayerIsAvailable para obtener más información.