Guía de inicio rápido de la API de Maps Embed

Coloca un mapa interactivo o una panorámica de Street View en tu página web con una solicitud HTTP, sin necesidad de usar JavaScript personalizado.

Costos

Todas las solicitudes a la API de Maps Embed están disponibles sin cargo y con uso ilimitado. Sin embargo, todas las solicitudes requieren una clave de API de Google Cloud válida. Para obtener más información, consulta Uso y facturación.

Antes de comenzar

Para crear un mapa incorporado en tu página web, completa los siguientes pasos de configuración obligatorios:

Paso 1: Configura tu proyecto

Console

  1. En la consola de Google Cloud, en la página del selector de proyectos, haz clic en Crear proyecto para comenzar a crear un proyecto nuevo de Cloud.

    Ir a la página Selector de proyectos

  2. Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Confirma que la facturación esté habilitada para tu proyecto.

    Google Cloud ofrece una prueba con un cargo de USD 0.00. La prueba vence al final de un plazo de 90 días, o bien después de que la cuenta acumule USD 300 en cargos, lo que ocurra primero. Puedes cancelar la prueba en cualquier momento. Para obtener más información, consulta Créditos de la cuenta de facturación y Facturación.

SDK de Cloud

gcloud projects create "PROJECT"

Obtén más información sobre el SDK de Google Cloud, la instalación del SDK de Cloud y los siguientes comandos:

Paso 2: Habilita las APIs o los SDKs

Para usar Google Maps Platform, debes habilitar las APIs o los SDKs que planeas usar con tu proyecto.

Console

Habilita la API de Maps Embed

SDK de Cloud

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

Obtén más información sobre el SDK de Google Cloud, la instalación del SDK de Cloud y los siguientes comandos:

Paso 3: Obtén una clave de API

En este paso, solo se realiza el proceso de creación de la clave de API. Si usas la clave de API en producción, te recomendamos que la restrinjas. Puedes encontrar más información en la página Usar claves de API específica del producto.

La clave de API es un identificador único que se utiliza para autenticar solicitudes asociadas a tu proyecto con fines de uso y facturación. Debes tener, al menos, una clave de API asociada a tu proyecto. Para crear una clave nueva o agregar una API o un SDK a una clave existente, sigue estas instrucciones.

Console

  1. Ve a la página Google Maps Platform > Claves y credenciales.

    Ir a la página Claves y credenciales

  2. Si se solicita, selecciona tu proyecto.

  3. Realiza una de las siguientes acciones:

    • Crea una clave nueva:

      1. Haz clic en Crear credenciales > Clave de API.
      2. En el panel Crear clave de API, abre la lista Elige las restricciones de API.
      3. Borra las APIs que no necesite esta clave y asegúrate de que la API de Maps Embed permanezca seleccionada.
      4. Haz clic en Crear. En el panel, se mostrará tu nueva clave de API.

    • Usar una clave existente:

      1. Haz clic en el nombre de la clave.
      2. En la lista Seleccionar las restricciones de API, selecciona API de Maps Embed.
      3. Haz clic en Guardar.

    Seleccionar una API aquí no la habilita. Asegúrate de que la API de Maps Embed esté habilitada en su página de la biblioteca de APIs.

  4. Para ver la cadena de clave más adelante, ve a la página Claves y credenciales y haz clic en Mostrar clave para la clave.

Si la consola se ve diferente de estos pasos, consulta Crea una clave de API y Agrega restricciones de API en la documentación de Google Cloud.

SDK de Cloud

Reemplaza PROJECT_ID por el ID del proyecto en los siguientes comandos.

  • Crea una clave nueva: Ejecuta el siguiente comando y reemplaza DISPLAY_NAME por un nombre para la clave. 

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=maps-embed-backend.googleapis.com

    Obtén más información sobre el SDK de Google Cloud, la instalación del SDK de Cloud y los siguientes comandos:

  • Usa una clave existente: Ejecuta el siguiente comando y reemplaza KEY_ID por el ID de la clave. La marca --append conserva las APIs que la clave ya permite. Sin él, el comando las reemplaza.

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=maps-embed-backend.googleapis.com

    Obtén más información sobre el SDK de Google Cloud, la instalación del SDK de Cloud y los siguientes comandos:

    El ID de clave no es la cadena de clave ni el nombre visible. Para encontrarlo, ejecuta gcloud services api-keys list --project="PROJECT_ID". El ID es la última parte del campo name: projects/PROJECT_NUMBER/locations/global/keys/KEY_ID.

Para ver la cadena de la clave, ejecuta gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID".

Cómo generar un iframe

Haz clic en las siguientes opciones y agrega una ubicación y una clave de API para generar un iframe para tu página web. Para obtener información sobre parámetros y opciones adicionales, consulta Cómo incorporar un mapa.

Prueba tu iframe

Para ver tu iframe en una ventana del navegador HTML, haz lo siguiente:

  1. Abre tu editor de texto predeterminado. Deberías tener instalados en tu dispositivo editores de texto como TextEdit o el Bloc de notas de Microsoft Windows de forma predeterminada.
  2. Crea un archivo HTML y asígnale el nombre index.html.

  3. Agrega el siguiente código con el iframe que generaste anteriormente:

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. Guarda tu archivo HTML index.html.

  5. Para cargar el archivo HTML en un navegador web, arrástralo del escritorio al navegador. También puedes hacer doble clic en el archivo en la mayoría de los sistemas operativos.

¡Felicitaciones! Acabas de configurar y compilar un mapa con la API de Maps Embed.

Realiza una limpieza

Puedes borrar el proyecto de Google Cloud para detener la facturación de todos los recursos que se usaron en él.

  1. En la consola de Google Cloud, ve a la página Administrar recursos:

    Ir a la página Administración de recursos

  2. Si el proyecto que deseas borrar está vinculado con una organización, selecciona y expande la lista de organizaciones en la parte superior de la página.
  3. En la lista de proyectos, selecciona el proyecto que deseas borrar y haz clic en Borrar.
  4. En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.

Próximos pasos