En esta guía, se muestra cómo incorporar un mapa interactivo en tu página web.
Crea la URL de la API de Maps Embed
A continuación, se muestra un ejemplo de URL 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 con tu modo de mapa.
- YOUR_API_KEY con tu clave de API. Para obtener más información, consulta Cómo obtener una clave de API.
- PARAMETERS con los parámetros obligatorios y opcionales para el modo de mapa.
Agrega la URL a un iframe
Para usar la API de Maps Embed en tu página web, establece la URL que creaste 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 usa las siguientes propiedades adicionales:
- La propiedad
allowfullscreen
para permitir 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 puedan funcionar correctamente.
Puedes cambiar el tamaño del iframe para que se adapte a la estructura y el diseño de tu sitio web, pero consideramos que a los visitantes les resulta más fácil interactuar con mapas más grandes. Ten en cuenta que los mapas incorporados no se admiten con un tamaño inferior a 200 px en ninguna dimensión.
Restricciones de la clave de API
Si el sitio web de alojamiento tiene una metaetiqueta referrer
establecida en no-referrer
o same-origin
, el navegador no enviará el encabezado Referer
a Google. Esto puede hacer que la restricción de tu 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 se envíen encabezados Referer
a Google.
Cómo elegir los modos de mapa
Puedes especificar uno de los siguientes modos de mapa para usar en la URL de tu solicitud:
place
: Muestra un marcador de mapa en un lugar o una dirección en particular, como un punto de referencia, una empresa, un elemento geográfico o una ciudad.view
: Devuelve 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 el tiempo de viaje.streetview
: Muestra vistas panorámicas interactivas desde 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 | Valores aceptados |
---|---|---|---|
q |
Obligatorio | Define la ubicación del marcador del mapa. | Nombre del lugar, dirección, código plus o ID de lugar con caracteres de escape de URL.
La API de Maps Embed admite + y %20 cuando se escapan espacios. Por ejemplo, convierte "City Hall, New York, NY" en City+Hall,New+York,NY o los Plus Codes "849VCWC8+R9" en 849VCWC8%2BR9 . |
center |
Opcional | Define el centro de la vista del 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. | Los valores varían de 0 (todo el mundo) a 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 del mapa 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 los mosaicos del mapa. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo se admite para algunas tarjetas de países. Si el idioma específico solicitado no se admite para el conjunto de tarjetas, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las etiquetas y las fronteras adecuadas para mostrar, según las sensibilidades geopolíticas. | Acepta un código de región especificado como una subetiqueta de región Unicode de dos caracteres (no numéricos) que se asigna a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de 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 | Valores aceptados |
---|---|---|---|
center |
Obligatorio | Define el centro de la vista del 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. | Los valores varían de 0 (todo el mundo) a 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 del mapa 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 los mosaicos del mapa. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo se admite para algunas tarjetas de países. Si el idioma específico solicitado no se admite para el conjunto de tarjetas, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las etiquetas y las fronteras adecuadas para mostrar, según las sensibilidades geopolíticas. | Acepta un código de región especificado como una subetiqueta de región Unicode de dos caracteres (no numéricos) que se asigna a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de 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 Oslo y Telemark, Noruega, la distancia y el tiempo de viaje evitando 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 | Valores aceptados |
---|---|---|---|
origin |
Obligatorio | Define el punto de partida desde el cual se mostrarán las indicaciones. | Nombre del lugar, dirección, código plus, coordenadas de latitud y longitud o ID de lugar con escape de URL.
La API de Maps Embed admite + y %20 cuando se escapan espacios. Por ejemplo, convierte "City Hall, New York, NY" en City+Hall,New+York,NY o los Plus Codes "849VCWC8+R9" en 849VCWC8%2BR9 . |
destination |
Obligatorio | Define el extremo de las instrucciones sobre cómo llegar. | Nombre del lugar, dirección, código plus, coordenadas de latitud y longitud o ID de lugar con escape de URL.
La API de Maps Embed admite + y %20 cuando se escapan espacios. Por ejemplo, convierte "City Hall, New York, NY" en City+Hall,New+York,NY o los Plus Codes "849VCWC8+R9" en 849VCWC8%2BR9 . |
waypoints |
Opcional | Especifica uno o más lugares intermedios para generar instrucciones sobre cómo llegar entre el origen y el destino. | Nombre, dirección o ID del 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 método de viaje. Si no se especifica ningún modo, la API de Maps Embed mostrará uno o más de los modos más relevantes para la ruta especificada. | driving , walking (que prefiere las sendas peatonales y las aceras, cuando están disponibles), bicycling (que prefiere las rutas que usan ciclovías y calles preferidas cuando están disponibles), transit o flying . |
avoid |
Opcional | Especifica las características que se deben evitar en las instrucciones sobre cómo llegar. Ten en cuenta que esto no impide las rutas que incluyen las funciones restringidas, sino que sesga el resultado hacia 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, métrico o imperial, cuando se muestran distancias en los resultados. Si no se especifican units , el país origin de la búsqueda determina las unidades que se usarán. |
metric o imperial |
center |
Opcional | Define el centro de la vista del 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. | Los valores varían de 0 (todo el mundo) a 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 del mapa 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 los mosaicos del mapa. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo se admite para algunas tarjetas de países. Si el idioma específico solicitado no se admite para el conjunto de tarjetas, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las etiquetas y las fronteras adecuadas para mostrar, según las sensibilidades geopolíticas. | Acepta un código de región especificado como una subetiqueta de región Unicode de dos caracteres (no numéricos) que se asigna a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de 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 sola ubicación. Las imágenes contienen 360 grados de vista horizontal (vista envolvente completa) y 180 grados de vista vertical (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.
Consulta 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
Se requiere uno de los siguientes parámetros de URL:
location
acepta una latitud y una longitud como valores separados por comas (46.414382,10.013988
). La API muestra la panorámica fotografiada más cerca de esta ubicación. Dado que las imágenes de Street View se actualizan periódicamente y las fotografías se pueden tomar desde posiciones ligeramente diferentes cada vez, es posible que tu ubicación se ajuste a un panorama diferente cuando se actualicen las imágenes.pano
es un ID de panorámica específico. Si especificas unpano
, también puedes especificar unlocation
. El parámetrolocation
solo se usa si la API no puede encontrar el ID del panorama.
Los siguientes parámetros de dirección URL son opcionales:
Parámetro | Tipo | Descripción | Valores aceptados |
---|---|---|---|
heading |
Opcional | Indica el rumbo de la brújula de la cámara en grados en sentido horario a partir del norte. | Valor en grados de -180° a 360° |
pitch |
Opcional | Especifica el ángulo, hacia arriba o hacia abajo, de la cámara. Los valores positivos inclinarán la cámara hacia arriba, mientras que los valores negativos la inclinarán hacia abajo. La inclinación predeterminada de 0° se establece según la posición de la cámara cuando se capturó la imagen. Por este motivo, una inclinación de 0° suele ser horizontal, pero no siempre. 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. El valor predeterminado es 90°. Cuando se trabaja con una ventana gráfica de tamaño fijo, el campo de visión se puede considerar el nivel de zoom, y los números más pequeños indican un mayor nivel de zoom. | Valor en grados, con un rango de 10° a 100° |
center |
Opcional | Define el centro de la vista del 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. | Los valores varían de 0 (todo el mundo) a 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 del mapa 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 los mosaicos del mapa. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo se admite para algunas tarjetas de países. Si el idioma específico solicitado no se admite para el conjunto de tarjetas, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las etiquetas y las fronteras adecuadas para mostrar, según las sensibilidades geopolíticas. | Acepta un código de región especificado como una subetiqueta de región Unicode de dos caracteres (no numéricos) que se asigna a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de cobertura de Google Maps Platform para conocer las regiones admitidas. |
Modo de search
El modo Search
muestra los resultados de una búsqueda en toda 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 un parámetro center
y zoom
para delimitar 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 | Valores aceptados |
---|---|---|---|
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 del 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. | Los valores varían de 0 (todo el mundo) a 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 del mapa 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 los mosaicos del mapa. De forma predeterminada, los visitantes verán un mapa en su propio idioma. Este parámetro solo se admite para algunas tarjetas de países. Si el idioma específico solicitado no se admite para el conjunto de tarjetas, se usará el idioma predeterminado de ese conjunto. | |
region |
Opcional | Define las etiquetas y las fronteras adecuadas para mostrar, según las sensibilidades geopolíticas. | Acepta un código de región especificado como una subetiqueta de región Unicode de dos caracteres (no numéricos) que se asigna a valores de ccTLD ("dominio de nivel superior") conocidos de dos caracteres. Consulta los Detalles de cobertura de Google Maps Platform para conocer las regiones admitidas. |
Parámetros del ID de lugar
La API de Maps Embed admite el uso de IDs de lugar en lugar de proporcionar un nombre o una dirección de 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 origen de una solicitud de direcciones: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
establece un radio, especificado en metros, en el que se debe buscar 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. También ten en cuenta que la búsqueda solo devuelve panorámicas en las que es posible determinar si son interiores o exteriores. Por ejemplo, no se devuelven las fotos esféricas porque se desconoce si son de interiores o exteriores.