incorporar un mapa

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

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

Agrega la URL en un iframe

Para usar la API de Maps Embed en tu página web, configura la URL que Se compila 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 estándar borde iframe alrededor del mapa.
  • La propiedad referrerpolicy="no-referrer-when-downgrade" para permitir navegador envíe la URL completa como el encabezado Referer con la solicitud, de modo que Las restricciones de la clave de API podrían funcionar correctamente.

Puedes cambiar el tamaño del iframe para adaptarlo a la estructura y el diseño de tu sitio web. pero, por lo general, a los visitantes 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 dimensión.

Restricciones de la clave de API

Si el sitio web de hosting tiene una metaetiqueta referrer que se establece en no-referrer, o same-origin, el navegador no enviará el encabezado Referer a Google. Esta es posible que se aplique la restricción de la clave de API para rechazar las solicitudes. Para que la restricción funcione correctamente, agrega un referrerpolicy al iframe, como en el ejemplo anterior, para especificar de forma explícita permitir 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 puede 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 del mapa en un lugar o una dirección en particular. 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 específicos en el mapa, así como la distancia y el tiempo de viaje.
  • streetview: muestra vistas panorámicas interactivas desde en las ubicaciones designadas.
  • search: Muestra los resultados de una búsqueda en el mapa visible. región.

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 de lugar, dirección, código plus o ID de lugar con escape de URL. La API de Maps Embed admite + y %20 cuando se escapan los espacios. Por ejemplo, convierte "Ayuntamiento, Nueva York, NY" a City+Hall,New+York,NY o el código 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) a 21 (edificios individuales). El límite superior puede variar en función de 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 lenguaje que se usará para los elementos de la interfaz de usuario y para la visualización de etiquetas en los mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa idioma. Este parámetro solo se admite para algunos mosaicos de países. si los el idioma específico solicitado no es compatible con el conjunto de mosaicos, entonces el el idioma predeterminado para ese conjunto de mosaicos.
region Opcional Define los bordes y las etiquetas adecuados que se mostrarán, según sensibilidades geopolíticas. Acepta un código de región especificado con dos caracteres (no numéricos). asignación de subetiquetas regionales de Unicode al ccTLD conocido ("dominio de nivel superior") valores de dos caracteres. Consulta Google Maps Platform Detalles de la cobertura para 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 de satélite 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 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) a 21 (edificios individuales). El límite superior puede variar en función de 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 lenguaje que se usará para los elementos de la interfaz de usuario y para la visualización de etiquetas en los mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa idioma. Este parámetro solo se admite para algunos mosaicos de países. si los el idioma específico solicitado no es compatible con el conjunto de mosaicos, entonces el el idioma predeterminado para ese conjunto de mosaicos.
region Opcional Define los bordes y las etiquetas adecuados que se mostrarán, según sensibilidades geopolíticas. Acepta un código de región especificado con dos caracteres (no numéricos). asignación de subetiquetas regionales de Unicode al ccTLD conocido ("dominio de nivel superior") valores de dos caracteres. Consulta Google Maps Platform Detalles de la cobertura para 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 Valores aceptados
origin Obligatorio Define el punto de partida desde el que se deben mostrar las indicaciones. Nombre de lugar, dirección, Plus Code y latitud/longitud con caracteres de escape de URL coordenadas o el ID de lugar. La API de Maps Embed admite + y %20 cuando se escapan los espacios. Por ejemplo, convierte "Ayuntamiento, Nueva York, NY" a City+Hall,New+York,NY o el código plus "849VCWC8+R9" a 849VCWC8%2BR9
destination Obligatorio Define el punto de destino de las indicaciones. Nombre de lugar, dirección, Plus Code y latitud/longitud con caracteres de escape de URL coordenadas o el ID de lugar. La API de Maps Embed admite + y %20 cuando se escapan los espacios. Por ejemplo, convierte "Ayuntamiento, Nueva York, NY" a City+Hall,New+York,NY o el código plus "849VCWC8+R9" a 849VCWC8%2BR9
waypoints Opcional Especifica uno o más lugares intermedios entre los cuales puedes enrutar las instrucciones sobre cómo llegar el origen y el destino. Nombre del lugar, dirección o ID de lugar: Se pueden especificar múltiples puntos de referencia usando el carácter de barra vertical (|) para lugares separados (p.ej., Berlin,Germany|Paris,France). Puedes y 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 varios de los modos más relevantes para el ruta especificada. driving, walking (que prefiere lugares para peatones senderos y aceras, cuando estén disponibles), bicycling (que rutas por ciclovías y calles preferidas, si están disponibles), transit o flying.
avoid Opcional Especifica las características que se deben evitar en las instrucciones. Ten en cuenta que esto no excluir rutas que incluyan los componentes restringidos sesga el resultado en 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 distancias en los resultados. Si no se especifica units, el valor 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) a 21 (edificios individuales). El límite superior puede variar en función de 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 lenguaje que se usará para los elementos de la interfaz de usuario y para la visualización de etiquetas en los mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa idioma. Este parámetro solo se admite para algunos mosaicos de países. si los el idioma específico solicitado no es compatible con el conjunto de mosaicos, entonces el el idioma predeterminado para ese conjunto de mosaicos.
region Opcional Define los bordes y las etiquetas adecuados que se mostrarán, según sensibilidades geopolíticas. Acepta un código de región especificado con dos caracteres (no numéricos). asignación de subetiquetas regionales de Unicode al ccTLD conocido ("dominio de nivel superior") valores de dos caracteres. Consulta Google Maps Platform Detalles de la cobertura para 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 a lo largo de área de cobertura. Usuario fotos esféricas que aportó Colecciones especiales de Street View también están disponibles.

Cada panorámica de Street View proporciona una vista de 360 grados desde una sola ubicación. Las imágenes contienen una vista horizontal de 360 grados (vista envolvente completa). vertical y a 180 grados (desde el extremo superior hasta el inferior). El El modo streetview proporciona un visualizador que renderiza el resultado panorámica 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.

Observa 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 separadas por comas de salida (46.414382,10.013988). La API mostrará la panorámica fotográfica más cercana a esta ubicación. Debido a que las imágenes de Street View son se actualizan periódicamente, y es posible que las fotografías se tomen con imágenes ligeramente diferentes. posiciones cada vez, es posible que tu ubicación se ajuste a una panorámica cuando se actualizan las imágenes.

  • pano es un ID de panorámica específico. Si especificas un pano también puedes especificar una location. El location solo se usará si la API no puede encontrar la panorámica. ID.

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 en el sentido de las manecillas del reloj del norte. Valor en grados de -180° a 360°
pitch Opcional especifica el ángulo, ascendente o descendente, de la cámara. Los valores positivos se orientarán hacia arriba, mientras que los valores negativos la orientarán hacia abajo. El la inclinación predeterminada de 0° se basa en la posición de la cámara cuando se capturó la imagen. Por ello, con frecuencia una inclinación de 0° no siempre es horizontal. Por ejemplo, una imagen tomada en una colina probablemente muestran 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. Integra la temperatura predeterminada es de 90°. Cuando se trata de un viewport de tamaño fijo, el campo de se puede considerar como el nivel de zoom; los números más pequeños indican una 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) a 21 (edificios individuales). El límite superior puede variar en función de 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 lenguaje que se usará para los elementos de la interfaz de usuario y para la visualización de etiquetas en los mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa idioma. Este parámetro solo se admite para algunos mosaicos de países. si los el idioma específico solicitado no es compatible con el conjunto de mosaicos, entonces el el idioma predeterminado para ese conjunto de mosaicos.
region Opcional Define los bordes y las etiquetas adecuados que se mostrarán, según sensibilidades geopolíticas. Acepta un código de región especificado con dos caracteres (no numéricos). asignación de subetiquetas regionales de Unicode al ccTLD conocido ("dominio de nivel superior") valores de dos caracteres. Consulta Google Maps Platform Detalles de la cobertura para 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 incluir una ubicación en el término de búsqueda (record+stores+in+Seattle) o incluyendo 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 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) a 21 (edificios individuales). El límite superior puede variar en función de 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 lenguaje que se usará para los elementos de la interfaz de usuario y para la visualización de etiquetas en los mosaicos de mapas. De forma predeterminada, los visitantes verán un mapa idioma. Este parámetro solo se admite para algunos mosaicos de países. si los el idioma específico solicitado no es compatible con el conjunto de mosaicos, entonces el el idioma predeterminado para ese conjunto de mosaicos.
region Opcional Define los bordes y las etiquetas adecuados que se mostrarán, según sensibilidades geopolíticas. Acepta un código de región especificado con dos caracteres (no numéricos). asignación de subetiquetas regionales de Unicode al ccTLD conocido ("dominio de nivel superior") valores de dos caracteres. Consulta Google Maps Platform Detalles de la cobertura para 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 un nombre o dirección del lugar. Los IDs de lugar son una forma estable de identificar un lugar. 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 de la siguiente URL parámetros:

  • q
  • origin
  • destination
  • waypoints

Para usar un ID de lugar, primero debes agregar el prefijo place_id:. El El siguiente código especifica el Ayuntamiento de Nueva York como el origen de las instrucciones sobre cómo llegar. solicitud: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius establece un radio, especificado en metros, en el que se debe buscar una que se centra en la latitud y longitud determinadas. 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. búsquedas son entre otros recursos específicos.
    • outdoor limita las búsquedas a las colecciones al aire libre. Para interiores no se incluyen en los resultados de la búsqueda. Ten en cuenta que las panorámicas exteriores puede no existir en la ubicación especificada. Ten en cuenta que la búsqueda solamente Devuelve panorámicas donde es posible determinar si se encuentran en interiores o al aire libre. Por ejemplo, las fotos esféricas no se muestran porque son desconocidas. ya sea en interiores o al aire libre.