Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps Embed API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps Embed API
  3. Crear claves correspondientes
Continuar

Google Maps Embed API

Información general

Google Maps Embed API te permite colocar un mapa interactivo o una imagen panorámica de Street View en tu sitio con una solicitud HTTP sencilla. Puedes insertarla fácilmente en tu página web al configurar la dirección URL de Google Maps Embed API como el atributo src de un iframe:

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Un mapa compilado para ti

Cada una de las persona que visita tu sitio ve un mapa de Google Maps adaptado para ellos. Si iniciaron sesión con su cuenta de Google, los sitios que hayan guardado, las ubicaciones del hogar y el trabajo y más están compilados en el mapa que ven. Esto también significa que también se guardan las interacciones con el mapa, como calificar con estrellas una ubicación, para poder visualizarlas fácilmente en Google Maps para escritorio o dispositivos móviles.

Estos detalles específicos para el usuario no están visibles para otros usuarios. Cada visitante ve un mapa compilado solo para ellos.

Los mapas de

Google Maps Embed API de fácil inserción son fáciles de agregar en tu página web; simplemente configura la dirección URL que compilaste como el valor de un atributo src de un iframe. Controla el tamaño del mapa con los atributosheight y width del iframe. No requiere JavaScript.

Sin límites de uso

No hay límites de uso para la Google Maps Embed API. Puedes insertar mapas o imágenes panorámicas de Street View en tus sitios web de mucho tráfico sin temor a alcanzar el límite de uso o o de consultas por segundo.

Publicidad en el mapa

Google Maps Embed API puede incluir publicidad en el mapa. El formato de la publicidad y el conjunto de anuncios en un mapa determinado pueden cambiar sin previo aviso.

Formación de la dirección URL

La dirección URL para una solicitud Google Maps Embed API es la siguiente:

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

Donde:

  • {MODE} es uno de place, directions, search, view o streetview.
  • {YOUR_API_KEY} es tu clave de API gratuita.
  • parameters incluye parámetros opcionales, y también parámetros específicos para modos.

Clave de API

Todas las solicitudes enviadas a Google Maps Embed API deben incluir una clave de API gratuita como el valor de un parámetro key. Tu clave te permite controlar el uso de la Google Maps API que realiza tu aplicación y garantiza que Google pueda comunicarse contigo acerca de tu sitio web/aplicación, si fuera necesario.

Para comenzar a usar Google Maps Embed API, haz clic en el botón que aparece a continuación, y que activa Google Maps Embed API automáticamente y obtiene una clave de API.

Obtener una clave

También puedes seguir estos pasos para obtener una clave de API:

  1. Ingresa a Google API Console.
  2. Crea o selecciona un proyecto.
  3. Haz clic en Continue para habilitar la API.
  4. En la página Credentials, obtén una clave de API (y configura las restricciones para esta).
    Nota: Si ya tienes una clave de API sin restricciones o una clave con restricciones de navegador, puedes usarla.
  5. Te recomendamos mantener segura tu API con las siguientes prácticas recomendadas.


En la Google API Console, también puedes buscar una clave existente o ver una lista de las API habilitadas.

Para obtener más información sobre el uso de la Google API Console, consulta Ayuda de la API Console.

Tipos de restricciones de clave de API

Las Google Maps API están disponibles para apps de Android o iOS y navegadores web, y a través de servicios web HTTP. Las API de cualquier plataforma pueden usar una clave de API genérica (sin restricciones). También puedes agregar una restricción (por ejemplo, un origen de referencia de HTTP) a la clave de API. Una vez restringida, la clave solo funcionará en plataformas que admitan ese tipo de restricción. Obtén más información sobre claves y credenciales.

Modos de mapa

Hay cuatro modos de inserción de mapas disponibles. El modo se especifica en la dirección URL de la solicitud.

Modo de sitio

El modo Place muestra un indicador en el mapa en un sitio o una dirección determinados, como un monumento histórico, una empresa, un accidente geográfico o un pueblo.

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

El siguiente parámetro de la dirección URL es obligatorio:

  • q define el sitio que se debe resaltar en el mapa. Acepta una ubicación como el nombre de un sitio, la dirección o el id. de sitio. La cadena debe transferirse a la dirección URL, de modo que una dirección como “City Hall, New York, NY” debe convertirse en City+Hall,New+York,NY. (Al transferir espacios, Google Maps Embed API admite + y %20). Los id. de sitio deben contener el prefijo place_id:.

Guardado atribuido

Un usuario que haya guardado sesión en su cuenta de Google podrá guardar el sitio indicado por el parámetro q. Los sitios guardados estarán visibles en otros mapas de Google en la Web o en dispositivos móviles. De forma predeterminada, los sitios guardados desde un mapa integrado incluirán información sobre atribución para recordarles a los usuarios dónde se encontraban cuando guardaron ese sitio. Puedes personalizar la atribución con los siguientes parámetros.

  • attribution_source atribuye el guardado de tu sitio o aplicación. Debes incluir una attribution_source personalizada antes de configurar attribution_web_url o attribution_ios_deep_link_id. Adopta por defecto la ruta de acceso de la dirección URL de la página en la que aparecía el mapa; por ejemplo: https://example.com/path/
  • attribution_web_url especifica un vínculo que lleva a tu sitio web. Si no se especifica attribution_source, attribution_web_url adoptará por defecto la dirección URL en la que aparece el mapa integrado; por ejemplo: https://example.com/path/page.html
  • attribution_ios_deep_link_id especifica un esquema de dirección URL que proporciona un vínculo profundo a una aplicación de iOS. Cuando se visualice en Google Maps para iOS, se mostrará attribution_ios_deep_link_id en lugar de attribution_web_url.

En el siguiente ejemplo, se muestra una fijación en el hotel Empress en Victoria, Columbia Británica. Al guardar esta ubicación, se le atribuirá el guardado a "Google Maps Embed API". La atribución aparecerá como dirección URL. En el ejemplo se usa el Esquema de dirección URL de Google Maps para proporcionar indicaciones de manejo a usuarios de iOS.

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

Modo de indicaciones

El modo Directions muestra el trayecto entre dos o más puntos especificados en el mapa, como también la distancia y el tiempo de viaje.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

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

  • origin define el punto de partida desde el que se deben mostrar las indicaciones. El valor puede ser el nombre de un sitio, una dirección o un Id. de sitio. La cadena debe transferirse a la dirección URL, de modo que una dirección como “City Hall, New York, NY” debe convertirse en City+Hall,New+York,NY. (Al transferir espacios, Google Maps Embed API admite + y %20). Los id. de sitio deben contener el prefijo place_id:.
  • destination define el punto de llegada de las indicaciones.

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

  • waypoints especifica uno o más sitios intermedios para orientar las indicaciones entre el punto de partida y el punto de llegada. Se pueden especificar varios waypoints usando el carácter de barra vertical (|) para separar los sitios (p. ej., Berlin,Germany|Paris,France). Puedes especificar hasta 20 waypoints. Cada waypoint puede ser el nombre de un sitio, una dirección o un id. de sitio.
  • mode define el medio de transporte. Las opciones son driving, walking (para la que se proporcionan vías peatonales y veredas, cuando están disponibles), bicycling (que se orienta mediante ciclovías y calles preferidas, cuando están disponibles), transit o flying. Si no se especifica ningún modo, Google Maps Embed API mostrará uno o más de los modos más relevantes para la ruta especificada.
  • avoid le indica a Google Maps que evite tolls, ferries o highways. Separa varios valores con el carácter de barra vertical (p. ej., avoid=tolls|highways). Ten en cuenta que esto no excluye las rutas que poseen las características delimitadas; simplemente inclina el resultado a rutas más favorables.
  • units especifica unidades metric o imperial para visualizar las distancias en los resultados. Si no se especifica units, el país origin de la consulta determina las unidades que se usarán.

Modo de búsqueda

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

El siguiente parámetro de la dirección URL es obligatorio:

  • q especifica el término de búsqueda. Puede incluir una limitación geográfica, como in+Seattle o near+98033.

Modo de visualización

El modo View devuelve un mapa sin marcadores ni indicaciones.

En el siguiente ejemplo, se usa 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

El siguiente parámetro de la dirección URL es obligatorio:

  • center define el centro de la ventana del mapa y acepta una latitud y una longitud como valores separados por comas (-33.8569,151.2152).

Parámetros opcionales

Los siguientes parámetros opcionales pueden usarse con cualquiera de los modos de mapa que se indican más arriba.

  • center define el centro de la vista de mapa. Acepta un valor de latitud y longitud separado por comas (como 37.4218,-122.0840).

  • zoom establece el nivel de zoom inicial del mapa. Los valores aceptados varían de 0 (todo el planeta) a 21 (edificios individuales). El límite superior puede variar según los datos del mapa disponibles en la ubicación seleccionada.

  • maptype puede ser roadmap (predeterminado) o satellite, y define el tipo de mosaico de mapas que se cargará.

  • language define el idioma que se utilizará para los elementos de la IU y para visualizar etiquetas en mosaicos de mapas. Ten en cuenta que 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. De forma predeterminada, los visitantes verán un mapa en su propio idioma.

  • region define los límites y las etiquetas adecuados para mostrar, en función de sensibilidades geopolíticas. Acepta un código de región especificado como un valor de dos caracteres ccTLD (dominio de nivel superior) .

Parámetros de id. de sitio

Google Maps Embed API admite el uso de id. de sitio en lugar de proporcionar el nombre o la dirección de un sitio. Los id. de sitio son una forma estable de identificar un sitio de forma exclusiva. Consulta la Documentación de la Google Places API para obtener más información acerca de cómo buscar y usar id. de sitio.

Google Maps Embed API acepta id. de sitio para los siguientes parámetros de direcciones URL:

  • q

  • origin

  • destination

  • waypoints

Para poder usar un id. de sitio, primero debes agregarle el prefijo place_id:. El siguiente código especifica New York City Hall como el punto de partida para obtener indicaciones request: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

Modo Street View

Google Maps Embed API te permite mostrar imágenes de Street View en tu sitio o blog como programas interactivos. Google Street View proporciona vistas panorámicas de ubicaciones designadas en su área de cobertura. También se encuentran disponibles fotos esféricas aportadas por los usuarios, y recopilaciones especiales de Street View .

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

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Es obligatorio uno de los siguientes parámetros de dirección URL:

  • location acepta una latitud y una longitud como valores separados por comas (46.414382,10.013988). La API mostrará la panorámica que se haya tomado más cerca de 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 panorámica específico. Si especificas una pano también puedes especificar una location. location solo se usará si la API no encuentra el id. de panorámica.

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

  • heading: indica la orientación de la cámara según la brújula en grados en sentido horario partiendo del norte. Los valores aceptados abarcan de -180° a 360°.

  • pitch especifica el ángulo, ascendente o descendente, de la cámara. pitch se especifica en grados de -90° a 90°. Los valores positivos orientarán la cámara en un ángulo ascendente, mientras 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° generalmente, pero no siempre, será horizontal. Por ejemplo, una imagen tomada en una colina posiblemente exhiba una inclinación predeterminada que no es horizontal.

  • fov determina el campo horizontal de la vista de la imagen. El campo de la vista se expresa en grados, en un rango de 10° a 100°. El valor predeterminado es 90°. Al manipular un viewport de tamaño fijo, el campo de la vista puede considerarse el nivel de zoom, en el que los números más bajos indican un mayor nivel de zoom.

  • language define el idioma que se usará para los elementos y las etiquetas de la IU. De forma predeterminada, los visitantes verán elementos de la IU en su propio idioma.

  • region define los límites y las etiquetas adecuados para mostrar, en función de sensibilidades geopolíticas. Acepta un código de región especificado como un valor de dos caracteres ccTLD (dominio de nivel superior) .

Inserción del mapa

Para usar la Google Maps Embed API en tu página web, configura la dirección URL que compilaste como el valor de un atributo src de iframe. Controla el tamaño del mapa con los atributos height y width del iframe:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

Sugerencia: Agrega allowfullscreen a las propiedades de tu iframe para permitir que ciertas partes del mapa puedan visualizarse en pantalla completa. Sugerencia: Las propiedades frameborder="0" y style="border:0" eliminan el borde estándar de iframe alrededor del mapa.

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 píxeles en cualquier dimensión.

Enviar comentarios sobre...

Google Maps Embed API
Google Maps Embed API
Si necesitas ayuda, visita nuestra página de asistencia.