incorporar un mapa

En esta guía, se muestra cómo incorporar un mapa interactivo a tu página web.

Crea la URL de la API de Maps Embed

La siguiente es 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 con tu modo de mapa.
  • YOUR_API_KEY con tu clave de API. Para obtener más información, consulta Obtén una clave de API.
  • PARAMETERS con los parámetros obligatorios y opcionales para tu modo de mapa

Agrega la URL en 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 para permitir que ciertas partes del mapa se muestren en pantalla completa.
  • Las propiedades frameborder="0" y style="border:0" para quitar el borde estándar de iframe alrededor del mapa
  • La propiedad referrerpolicy="no-referrer-when-downgrade" para permitir que el navegador envíe la URL completa como el encabezado Referer con la solicitud para que las restricciones de claves de API funcionen correctamente.

Puedes modificar el tamaño del iframe para que se ajuste a la estructura y el diseño de tu sitio web, pero nos hemos dado cuenta de que los usuarios generalmente prefieren interactuar con mapas más grandes. Ten en cuenta que no se admiten mapas integrados con un tamaño inferior a 200 px en ninguna dimensión.

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 hacer que la restricción de claves 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 de forma explícita 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 los modos del mapa

Puedes especificar uno de los siguientes modos de mapa para usar en tu URL de solicitud:

  • place: Muestra un pin en el mapa en un lugar o una dirección determinados, como un punto de referencia, una empresa, un accidente geográfico o un pueblo.
  • 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 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

En la siguiente URL, se 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 de lugar, dirección, código plus o ID de lugar con codificación de URL La API de Maps Embed admite + y %20 para escapar espacios. Por ejemplo, convierte "City Hall, New York, NY" en City+Hall,New+York,NY, o los códigos plus "849VCWC8+R9" en 849VCWC8%2BR9.
center Opcional Define el centro de la vista de mapa. Acepta un valor 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 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 mostrar etiquetas en los mosaicos de mapa. 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 para ese conjunto de mosaicos.
region Opcional Define las fronteras y las etiquetas apropiadas para mostrar, en función de sensibilidades geopolíticas. Acepta un código de región especificado como una subetiqueta de región de 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
  &center=-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 de mapa. Acepta un valor 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 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 mostrar etiquetas en los mosaicos de mapa. 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 para ese conjunto de mosaicos.
region Opcional Define las fronteras y las etiquetas apropiadas para mostrar, en función de sensibilidades geopolíticas. Acepta un código de región especificado como una subetiqueta de región de 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 que se deben mostrar las indicaciones. Nombre, dirección, código plus, coordenadas de latitud y longitud o ID de lugar con codificación de URL La API de Maps Embed admite + y %20 para escapar espacios. Por ejemplo, convierte "City Hall, New York, NY" en City+Hall,New+York,NY o los códigos plus "849VCWC8+R9" en 849VCWC8%2BR9.
destination Obligatorio Define el punto de destino de las indicaciones. Nombre, dirección, código plus, coordenadas de latitud y longitud, o ID de lugar con codificación de URL La API de Maps Embed admite + y %20 para escapar espacios. Por ejemplo, convierte "City Hall, New York, NY" en City+Hall,New+York,NY o los códigos plus "849VCWC8+R9" en 849VCWC8%2BR9.
waypoints Opcional Especifica uno o más lugares intermedios para orientar 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 waypoints usando el carácter de barra vertical (|) para separar los lugares (p. ej., Berlin,Germany|Paris,France). Puedes especificar hasta 20 waypoints.
mode Opcional Define el método de viaje. Si no se especifica ningún modo, la API de Maps Embed mostrará uno o varios de los modos más relevantes para la ruta especificada. driving, walking (que prefiere senderos y aceras para peatones, cuando están disponibles), bicycling (que realiza rutas a través de 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 excluye las rutas que incluyen las características restringidas; simplemente inclina el resultado a 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, ya sea métrico o imperial, al mostrar las distancias en los resultados. Si no se especifica 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 un valor 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 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 mostrar etiquetas en los mosaicos de mapa. 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 para ese conjunto de mosaicos.
region Opcional Define las fronteras y las etiquetas apropiadas para mostrar, en función de sensibilidades geopolíticas. Acepta un código de región especificado como una subetiqueta de región de 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 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 de 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.

Consulta la siguiente panorámica del 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 fotografiada más cercana a esa ubicación. Debido a que las imágenes de Street View se actualizan de manera periódica, y a que las fotografías pueden tomarse desde posiciones ligeramente diferentes en cada ocasión, es posible que tu ubicación se integre a otra panorámica cuando se actualicen las imágenes.

  • pano es un ID de panorama específico. Si especificas un pano, también puedes especificar un location. location solo se usará si la API no encuentra el ID de panorama.

Los siguientes parámetros de dirección URL son opcionales:

Parámetro Tipo Descripción Valores aceptados
heading Opcional Indica la orientación de la cámara según la brújula en grados y en sentido horario partiendo del 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 en la que estaba la cámara cuando se capturó la imagen. Por lo tanto, 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 es horizontal. Valor en grados de -90° a 90°
fov Opcional determina el campo visual horizontal de la imagen. El valor predeterminado es de 90°. Cuando se trata de un viewport de tamaño fijo, el campo de visión puede considerarse el nivel de zoom, en el que los números más bajos indican un nivel de zoom más alto. Es un valor en grados, con un rango de 10° a 100°.
center Opcional Define el centro de la vista de mapa. Acepta un valor 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 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 mostrar etiquetas en los mosaicos de mapa. 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 para ese conjunto de mosaicos.
region Opcional Define las fronteras y las etiquetas apropiadas para mostrar, en función de sensibilidades geopolíticas. Acepta un código de región especificado como una asignación de subetiqueta regional Unicode de dos caracteres (no numérica) 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 resultados para una búsqueda en el área de mapa visible. Se recomienda definir una ubicación para la búsqueda, ya sea al incluir una ubicación en el término de búsqueda (record+stores+in+Seattle) o al incluir un parámetro 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 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 de mapa. Acepta un valor 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 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 mostrar etiquetas en los mosaicos de mapa. 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 para ese conjunto de mosaicos.
region Opcional Define las fronteras y las etiquetas apropiadas para mostrar, en función de sensibilidades geopolíticas. Acepta un código de región especificado como una subetiqueta de región de 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 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 exclusiva. 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 poder 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 punto de partida para una solicitud de instrucciones sobre cómo llegar: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius establece un radio, especificado en metros, en el que se debe buscar una panorámica, centrado en 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 en las que es posible determinar si están en interiores o al aire libre. Por ejemplo, no se muestran las fotos panorámicas porque no se sabe si se tomaron en interiores o exteriores.