En esta guía, se muestra cómo incorporar un mapa interactivo en tu página web.
Cómo crear la URL de la API de Maps Embed
A continuación, se muestra una URL de ejemplo que carga la API de Maps Embed:
https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS
Reemplaza lo siguiente:
- MAP_MODE por el modo de mapa.
- YOUR_API_KEY por tu clave de API. Para obtener más información, consulta Cómo obtener una clave de API.
- PARAMETERS por los parámetros obligatorios y opcionales para tu modo de mapa
Cómo agregar la URL a un iframe
Para utilizar la API de Maps Embed en tu página web, configura la URL que compilaste como el valor del atributo src
de un iframe. Controla el tamaño del mapa con los atributos height
y width
del iframe, por ejemplo:
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
allowfullscreen>
</iframe>
El ejemplo de iframe anterior utiliza las propiedades adicionales:
- La propiedad
allowfullscreen
, que permite que ciertas partes del mapa se muestren en pantalla completa - Las propiedades
frameborder="0"
ystyle="border:0"
para quitar el borde estándar del iframe alrededor del mapa. - La propiedad
referrerpolicy="no-referrer-when-downgrade"
para permitir que el navegador envíe la URL completa como el encabezadoReferer
con la solicitud para que las restricciones de la clave de API funcionen correctamente.
Puedes cambiar el tamaño del iframe para adaptarlo a la estructura y el diseño de tu propio sitio web, pero notamos que a los visitantes generalmente les resulta más fácil interactuar con mapas más grandes. Ten en cuenta que no se admiten mapas incorporados con un tamaño inferior a 200 px en cualquiera de las dos dimensiones.
Restricciones de la clave de API
Si el sitio web de hosting tiene una metaetiqueta referrer
configurada como no-referrer
o same-origin
, el navegador no enviará el encabezado Referer
a Google. Esto puede provocar que tu restricción de clave de API rechace las solicitudes. Para que la restricción funcione correctamente, agrega una propiedad referrerpolicy
al iframe, como en el ejemplo anterior, para permitir explícitamente que los encabezados Referer
se envíen a Google.
Anuncios en el mapa
La API de Maps Embed puede incluir publicidad en el mapa. El formato del anuncio y el conjunto de anuncios que se muestran en un mapa determinado pueden cambiar sin previo aviso.
Cómo elegir modos del mapa
Puedes especificar uno de los siguientes modos de mapa para usar en tu URL de solicitud:
place
: Muestra un pin del mapa en un lugar o una dirección en particular, como un punto de referencia, una empresa, un accidente geográfico o una ciudad.view
: Muestra un mapa sin marcadores ni instrucciones sobre cómo llegar.directions
: Muestra la ruta entre dos o más puntos especificados en el mapa, así como la distancia y la duración del viaje.streetview
: Muestra vistas panorámicas interactivas de ubicaciones designadas.search
: Muestra los resultados de una búsqueda en la región visible del mapa.
Modo de place
La siguiente URL usa el modo de mapa place
para mostrar un marcador de mapa en la torre Eiffel:
https://www.google.com/maps/embed/v1/place
?key=YOUR_API_KEY
&q=Eiffel+Tower,Paris+France
Puedes usar los siguientes parámetros:
Parámetro | Tipo | Descripción | Accepted values |
---|---|---|---|
q |
Obligatorio | Define la ubicación del marcador del mapa. | Nombre, dirección, código plus o ID de lugar con escape de URL
La API de Maps Embed admite + y %20 al escapar de espacios. Por ejemplo, convierte "Ayuntamiento, Nueva York, NY" en City+Hall,New+York,NY , o bien los códigos plus "849VCWC8+R9" a 849VCWC8%2BR9 . |
center |
Opcional | Define el centro de la vista de mapa. | Acepta valores de latitud y longitud separados por comas; por ejemplo: 37.4218,-122.0840 . |
zoom |
Opcional | Establece el nivel de zoom inicial del mapa. | Valores que van desde 0 (todo el mundo) hasta 21 (edificios individuales). El límite superior puede variar según los datos del mapa disponibles en la ubicación seleccionada. |
maptype |
Opcional | Define el tipo de mosaicos de mapas que se cargarán. | roadmap (predeterminado) o satellite |
language |
Opcional | Define el idioma que se usará para los elementos de la IU y para la visualización de etiquetas en mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo es compatible con algunos mosaicos de países. Si el idioma específico solicitado no es compatible con el conjunto de mosaicos, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las fronteras y las etiquetas apropiadas que se mostrarán, en función de los criterios geopolíticos. | Acepta un código regional especificado como una asignación de subetiqueta de región Unicode de dos caracteres (no numéricos) a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de la cobertura de Google Maps Platform para conocer las regiones admitidas. |
Modo de view
En el siguiente ejemplo, se usa el modo view
y el parámetro opcional maptype
para mostrar una vista satelital del mapa:
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
Puedes usar los siguientes parámetros:
Parámetro | Tipo | Descripción | Accepted values |
---|---|---|---|
center |
Obligatorio | Define el centro de la vista de mapa. | Acepta valores de latitud y longitud separados por comas; por ejemplo: 37.4218,-122.0840 . |
zoom |
Opcional | Establece el nivel de zoom inicial del mapa. | Valores que van desde 0 (todo el mundo) hasta 21 (edificios individuales). El límite superior puede variar según los datos del mapa disponibles en la ubicación seleccionada. |
maptype |
Opcional | Define el tipo de mosaicos de mapas que se cargarán. | roadmap (predeterminado) o satellite |
language |
Opcional | Define el idioma que se usará para los elementos de la IU y para la visualización de etiquetas en mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo es compatible con algunos mosaicos de países. Si el idioma específico solicitado no es compatible con el conjunto de mosaicos, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las fronteras y las etiquetas apropiadas que se mostrarán, en función de los criterios geopolíticos. | Acepta un código regional especificado como una asignación de subetiqueta de región Unicode de dos caracteres (no numéricos) a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de la cobertura de Google Maps Platform para conocer las regiones admitidas. |
Modo de directions
En el siguiente ejemplo, se usa el modo directions
para mostrar la ruta entre Oslow y Telemark, Noruega, la distancia y la duración del viaje para evitar peajes y autopistas.
https://www.google.com/maps/embed/v1/directions
?key=YOUR_API_KEY
&origin=Oslo+Norway
&destination=Telemark+Norway
&avoid=tolls|highways
Puedes usar los siguientes parámetros:
Parámetro | Tipo | Descripción | Accepted values |
---|---|---|---|
origin |
Obligatorio | Define el punto de partida desde el que se deben mostrar las instrucciones sobre cómo llegar. | Nombre, dirección, código plus, coordenadas de latitud y longitud, o ID del lugar con escape de URL
La API de Maps Embed admite + y %20 al escapar de espacios. Por ejemplo, convierte "Ayuntamiento, Nueva York, NY" en City+Hall,New+York,NY , o bien los códigos plus "849VCWC8+R9" a 849VCWC8%2BR9 . |
destination |
Obligatorio | Define el destino de las instrucciones sobre cómo llegar. | Nombre, dirección, código plus, coordenadas de latitud y longitud, o ID del lugar con escape de URL
La API de Maps Embed admite + y %20 al escapar de espacios. Por ejemplo, convierte "Ayuntamiento, Nueva York, NY" en City+Hall,New+York,NY , o bien los códigos plus "849VCWC8+R9" a 849VCWC8%2BR9 . |
waypoints |
Opcional | Especifica uno o más lugares intermedios para dirigir las instrucciones sobre cómo llegar entre el origen y el destino. | Nombre del lugar, dirección o ID de lugar:
Se pueden especificar varios puntos de referencia con el carácter de barra vertical (|) para separar lugares (p.ej., Berlin,Germany|Paris,France ). Puedes especificar hasta 20 puntos de referencia. |
mode |
Opcional | Define el medio de transporte. Si no se especifica ningún modo, la API de Maps Embed mostrará uno o más de los más relevantes para la ruta especificada. | driving , walking (para la que se prefieren rutas peatonales y aceras, si están disponibles), bicycling (que se enruta por ciclovías y calles preferidas cuando están disponibles), transit o flying . |
avoid |
Opcional | Especifica los elementos que se deben evitar en las instrucciones sobre cómo llegar. Ten en cuenta que esto no excluye las rutas que incluyen los componentes restringidos; se personaliza el resultado de las rutas más favorables. | tolls , ferries o highways .
Separa varios valores con el carácter de barra vertical (p.ej.,
avoid=tolls|highways ). |
units |
Opcional | Especifica el método de medición, el sistema métrico o el imperial, al mostrar distancias en los resultados. Si no se especifican units , el país origin de la consulta determina las unidades que se usarán. |
metric o imperial |
center |
Opcional | Define el centro de la vista de mapa. | Acepta valores de latitud y longitud separados por comas; por ejemplo: 37.4218,-122.0840 . |
zoom |
Opcional | Establece el nivel de zoom inicial del mapa. | Valores que van desde 0 (todo el mundo) hasta 21 (edificios individuales). El límite superior puede variar según los datos del mapa disponibles en la ubicación seleccionada. |
maptype |
Opcional | Define el tipo de mosaicos de mapas que se cargarán. | roadmap (predeterminado) o satellite |
language |
Opcional | Define el idioma que se usará para los elementos de la IU y para la visualización de etiquetas en mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo es compatible con algunos mosaicos de países. Si el idioma específico solicitado no es compatible con el conjunto de mosaicos, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las fronteras y las etiquetas apropiadas que se mostrarán, en función de los criterios geopolíticos. | Acepta un código regional especificado como una asignación de subetiqueta de región Unicode de dos caracteres (no numéricos) a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de la cobertura de Google Maps Platform para conocer las regiones admitidas. |
Modo de streetview
La API de Maps Embed te permite mostrar imágenes de Street View como panorámicas interactivas desde ubicaciones designadas en su área de cobertura. También están disponibles las fotos esféricas aportadas por los usuarios y las colecciones especiales de Street View.
Cada panorámica de Street View proporciona una vista de 360 grados desde una ubicación. Las imágenes contienen una vista horizontal de 360 grados (vista envolvente completa) y una vista vertical de 180 grados (desde el extremo superior hasta el inferior). El modo streetview
proporciona un visor que renderiza la panorámica resultante como una esfera con una cámara en el centro. Puedes manipular la cámara para controlar el zoom y la orientación de la cámara.
Mira la siguiente panorámica en modo streetview
:
https://www.google.com/maps/embed/v1/streetview
?key=YOUR_API_KEY
&location=46.414382,10.013988
&heading=210
&pitch=10
&fov=35
Uno de los siguientes parámetros de URL es obligatorio:
location
acepta una latitud y una longitud como valores separados por comas (46.414382,10.013988
). La API mostrará la panorámica más cercana a esa ubicación. Debido a que las imágenes de Street View se actualizan periódicamente y que las fotografías pueden tomarse desde posiciones ligeramente diferentes en cada ocasión, es posible que tu ubicación se ajuste a una panorámica diferente cuando se actualicen las imágenes.pano
es un ID de panorámica específico. Si especificas unapano
, también puedes especificar unalocation
.location
solo se usará si la API no puede encontrar el ID de la panorámica.
Los siguientes parámetros de dirección URL son opcionales:
Parámetro | Tipo | Descripción | Accepted values |
---|---|---|---|
heading |
Opcional | Indica la orientación de la cámara según la brújula en grados en el sentido de las manecillas del reloj desde el norte. | Valor en grados de -180° a 360° |
pitch |
Opcional | especifica el ángulo, ascendente o descendente, de la cámara. Los valores positivos orientarán la cámara en un ángulo ascendente, mientras que los valores negativos la orientarán en un ángulo descendente. La inclinación predeterminada de 0° se establece en función de la posición de la cámara cuando se capturó la imagen. Por este motivo, una inclinación de 0° suele, pero no siempre, ser horizontal. Por ejemplo, una imagen tomada en una colina posiblemente exhiba una inclinación predeterminada que no sea horizontal. | Valor en grados de -90° a 90° |
fov |
Opcional | determina el campo visual horizontal de la imagen. Su valor predeterminado es de 90°. Cuando se trabaja con un viewport de tamaño fijo, el campo visual se puede considerar como el nivel de zoom, en el que los números más bajos indican un mayor nivel de zoom. | Valor en grados, con un rango de 10° a 100° |
center |
Opcional | Define el centro de la vista de mapa. | Acepta valores de latitud y longitud separados por comas; por ejemplo: 37.4218,-122.0840 . |
zoom |
Opcional | Establece el nivel de zoom inicial del mapa. | Valores que van desde 0 (todo el mundo) hasta 21 (edificios individuales). El límite superior puede variar según los datos del mapa disponibles en la ubicación seleccionada. |
maptype |
Opcional | Define el tipo de mosaicos de mapas que se cargarán. | roadmap (predeterminado) o satellite |
language |
Opcional | Define el idioma que se usará para los elementos de la IU y para la visualización de etiquetas en mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo es compatible con algunos mosaicos de países. Si el idioma específico solicitado no es compatible con el conjunto de mosaicos, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las fronteras y las etiquetas apropiadas que se mostrarán, en función de los criterios geopolíticos. | Acepta un código regional especificado como una asignación de subetiqueta de región Unicode de dos caracteres (no numéricos) a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de la cobertura de Google Maps Platform para conocer las regiones admitidas. |
Modo de search
El modo Search
muestra los resultados de una búsqueda en la región visible del mapa.
Se recomienda definir una ubicación para la búsqueda, ya sea incluyendo una ubicación en el término de búsqueda (record+stores+in+Seattle
) o incluyendo los parámetros center
y zoom
para limitar la búsqueda.
https://www.google.com/maps/embed/v1/search
?key=YOUR_API_KEY
&q=record+stores+in+Seattle
Puedes usar los siguientes parámetros:
Parámetro | Tipo | Descripción | Accepted values |
---|---|---|---|
q |
Obligatorio | Define el término de búsqueda. | Puede incluir una restricción geográfica, como in+Seattle o near+98033 . |
center |
Opcional | Define el centro de la vista de mapa. | Acepta valores de latitud y longitud separados por comas; por ejemplo: 37.4218,-122.0840 . |
zoom |
Opcional | Establece el nivel de zoom inicial del mapa. | Valores que van desde 0 (todo el mundo) hasta 21 (edificios individuales). El límite superior puede variar según los datos del mapa disponibles en la ubicación seleccionada. |
maptype |
Opcional | Define el tipo de mosaicos de mapas que se cargarán. | roadmap (predeterminado) o satellite |
language |
Opcional | Define el idioma que se usará para los elementos de la IU y para la visualización de etiquetas en mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo es compatible con algunos mosaicos de países. Si el idioma específico solicitado no es compatible con el conjunto de mosaicos, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las fronteras y las etiquetas apropiadas que se mostrarán, en función de los criterios geopolíticos. | Acepta un código regional especificado como una asignación de subetiqueta de región Unicode de dos caracteres (no numéricos) a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de la cobertura de Google Maps Platform para conocer las regiones admitidas. |
Parámetros de ID de lugar
La API de Maps Embed admite el uso de IDs de lugar en lugar de proporcionar el nombre o la dirección de un lugar. Los IDs de lugar son una forma estable de identificar un lugar de forma única. Para obtener más información, consulta la documentación de la API de Google Places.
La API de Maps Embed acepta IDs de lugar para los siguientes parámetros de URL:
q
origin
destination
waypoints
Para usar un ID de lugar, primero debes agregar el prefijo place_id:
. En el siguiente código, se especifica el Ayuntamiento de Nueva York como el origen de una solicitud de instrucciones sobre cómo llegar: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
establece un radio, especificado en metros, en el que se busca una panorámica, según la latitud y longitud determinadas. Los valores válidos son números enteros no negativos. El valor predeterminado es 50.source
limita las búsquedas de Street View a las fuentes seleccionadas. Estos son los valores válidos:default
usa las fuentes predeterminadas de Street View; las búsquedas no se limitan a fuentes específicas.outdoor
limita las búsquedas a las colecciones al aire libre. Las colecciones de interiores no se incluyen en los resultados de la búsqueda. Ten en cuenta que es posible que no existan panorámicas al aire libre para la ubicación especificada. Además, ten en cuenta que la búsqueda solo muestra panorámicas cuando es posible determinar si están en interiores o al aire libre. Por ejemplo, no se muestran PhotoSpheres porque se desconoce si se encuentran en interiores o al aire libre.