Configurar Google Maps para tu PWA

Para mostrar Google Maps en tu Progressive Web App (PWA), necesitas un proyecto de Google Cloud con la facturación activada y una clave API válida. Sin facturación, Google solo sirve una solicitud de mapa al día.

Cada servicio de Google Maps tiene su propio límite gratuito mensual: 10 000 cargas de mapa, 10 000 imágenes de mapa estáticas y 10 000 búsquedas de dirección en la lista de precios global (70 000 en las cuentas que pueden acogerse a la lista de precios de la India). Por encima de estos límites, se cobra en tu cuenta de facturación. El antiguo crédito mensual de 200 $ terminó el 1 de marzo de 2025, y la prueba gratuita de 300 $ de Google Cloud no es una oferta gratuita de Maps. Consulta los precios de Google Maps Platform .

Sigue los pasos de abajo en este orden.

Para utilizar Google Maps Platform, debes tener una cuenta de facturación. La cuenta de facturación se utiliza para realizar un seguimiento de los costos asociados con tus proyectos.

1. Ve a Google Cloud Platform Console .
2. Haz clic en el botón del menú de navegación en la parte superior izquierda y selecciona "Facturación".
3. Configura tu cuenta de facturación.
Si esta es tu primera cuenta de facturación, en la página Facturación:
-Haz clic en el botón Agregar cuenta de facturación.
-Sigue los pasos para configurar tu primera cuenta de facturación.

Si ya tienes una cuenta de facturación, en la página Facturación:
-Haz clic en el menú desplegable de facturación y selecciona Administrar cuentas de facturación. Verás una lista de tus cuentas de facturación actuales.
-Selecciona Crear cuenta
-Sigue las instrucciones para configurar tu próxima cuenta de facturación.

Encuentra más información sobre la documentación de Google: https://developers.google.com/maps/gmp-get-started#create-billing-account

Para utilizar Google Maps Platform, debes tener un proyecto . El proyecto es la base para administrar servicios, credenciales, facturación, API y SDK. Los costos de uso asociados con el proyecto se cargarán a la cuenta de facturación vinculada al proyecto.

En caso de que no tengas ninguna cuenta de Google, crea una  para continuar con este proceso.

Para crear un proyecto:

1. Ve a Google Cloud Platform Console .
2. Haz clic en el botón del menú de navegación en la parte superior izquierda y selecciona "Inicio".
3. Haz clic en el menú desplegable del proyecto y seleccione "NUEVO PROYECTO".
4. En la página Nuevo proyecto, completa la información requerida:
- Nombre del proyecto: acepte el nombre predeterminado o introduzca un nombre personalizado.
El nombre del proyecto se puede cambiar en cualquier momento.
- ID de proyecto: acepta el valor predeterminado o haz clic en EDITAR para ingresar una ID personalizada.
El ID del proyecto no se puede cambiar después de que se crea el proyecto, así que elige un ID con el que te sientas cómodo usando durante la vida útil del proyecto.
-Ubicación: Si tienes una organización a la que deseas vincular tu proyecto, haz clic en "Examinar" y selecciónalo; de lo contrario, elige "Sin organización".
El ID del proyecto no se puede cambiar después de que se crea el proyecto, así que elige un ID con el que te sientas cómodo usando durante la vida útil del proyecto.
Ubicación: si tienes una organización a la que deseas vincular tu proyecto, haz clic en Examinar y selecciónalo; de lo contrario, elige "Sin organización".
5. Haga clic en "CREAR"

Tu PWA usa tres API de Google. Habilítalas en el proyecto que acabas de crear:

1. Ve a la biblioteca de API de Maps
2. Haz clic en "Maps JavaScript API" y después en "Habilitar" (mapas interactivos)
3. Vuelve atrás, haz clic en "Maps Static API" y después en "Habilitar" (imágenes de mapa)
4. Vuelve atrás, haz clic en "Geocoding API" y después en "Habilitar" (la acción "usar mi ubicación" de los campos de dirección)
5. Comprueba que las tres API están habilitadas.

Tu PWA no usa Places, Directions ni Distance Matrix: no necesitas habilitarlas.

Para utilizar Google Maps Platform, debes tener una clave API . La clave API se agrega a todas tus solicitudes y aplicaciones.

1. Ve a la página API y servicios> Credenciales.
2. Haz clic en Crear credenciales> Clave API.
El cuadro de diálogo creado con la clave de API muestra tu clave de API recién creada.
3. Haz clic en "Restringir clave".

4. Cambia el nombre de la clave a "PWA Map Key"
5. En Restricciones de aplicaciones, selecciona Sitios web
6. Añade tu dominio dos veces, para autorizar todas las direcciones de tu PWA:
https://midominio.com/* y https://*.midominio.com/*
EJEMPLO si todavía usas la dirección de GoodBarber: https://*.goodbarber.app/*

Atención: si más adelante instalas un nombre de dominio en tu PWA, añádelo a la lista. Mantén también la dirección de GoodBarber en la lista.

7. En Restricciones de API, selecciona Restringir clave y marca Maps JavaScript API, Maps Static API y Geocoding API. Si falta una, la función correspondiente de tu PWA deja de funcionar.
8. Haz clic en "Guardar"

1. Copia tu clave de API

2. En tu back office, ve al menú Ajustes > Conexiones externas
3. En la lista de proveedores de mapas, selecciona Google Maps
4. Pega tu clave API
5. Opcional: pega un Google Cloud Map ID para dar estilo a tus mapas (ver más abajo)
6. Haz clic en "Guardar"

1. Ve al menú Canales de venta > PWA > Actualizar
2. Haz clic en "Actualizar"

Ya está, la clave API de Google Maps está integrada en tu PWA.
Cierra tu PWA y vuelve a abrirla para que se apliquen los cambios.

Un Map ID aplica a los mapas de tu PWA un estilo guardado en tu proyecto de Google Cloud. Sin Map ID, tu PWA mantiene el mapa estándar de Google.

1. En el mismo proyecto de Google Cloud que tu clave API, ve a la página Administración de mapas
2. Haz clic en "Crear ID de mapa"
3. Dale un nombre, elige el tipo de mapa JavaScript y después Trama (mapa plano) o Vector
4. Haz clic en "Guardar" y copia el Map ID

5. En la página Estilos de mapa , crea un estilo, personalízalo y publícalo. Después vuelve a Administración de mapas, abre tu Map ID y, en Estilos de mapa, elige tu estilo para el modo claro. Tu PWA siempre muestra el estilo del modo claro, incluso en un dispositivo configurado en modo oscuro: el estilo del modo oscuro no se usa. Consulta la documentación de Google para más detalles.

6. Pega el Map ID en Ajustes > Conexiones externas para dar estilo a todos los mapas de tu app.
7. Para dar un estilo propio a una sección Mapas, una sección Agenda o un widget Mapa, pega un Map ID en los ajustes de mapa de su diseño. Deja ese campo vacío para mantener el Map ID de la app.
Atención: pega el Map ID que aparece en la página Administración de mapas, no el ID del estilo que aparece en la página Estilos de mapa. Con un ID de estilo, el mapa mantiene el estilo de Google por defecto.
8. Actualiza los ajustes de tu PWA.

En los mapas que usan un Map ID, los marcadores se muestran con los marcadores avanzados de Google. El Map ID debe venir del mismo proyecto de Google Cloud que tu clave API. Usar un Map ID en un mapa web no cuesta más: cada mapa sigue contando como una carga.

Define cuotas en tus API: al alcanzar una cuota, Google deja de responder hasta el día siguiente, así que tu factura no puede superarla. Una alerta de presupuesto solo envía un correo, no detiene el uso.
https://developers.google.com/maps/faq#usage_cap

Si tus mapas aun no se pueden ver en tu PWA entonces hay que seguir el proceso siguiente:
1. Ve a tu Google Cloud Console
2. Selecciona el proyecto que creaste al paso 1 de esta ayuda en línea, desde la barra de arriba del Google Console: 

3. Haz clic en Menú de navegación > Servicios & APIs > Credenciales:

4 - Haz clic en clave mapa PWA que creaste al paso 3 de esta ayuda en línea
5 - Crea una captura de la configuración de tu clave, para que podamos ver la restricción Aplicación y restricciones Sitio Web de tu clave API (puedes ver un ejemplo abajo):

6. Crea una captura de la clave API completa (puedes ver un ejemplo abajo):

7. Abre un ticket al soporte explicando el problema, con las capturas de pantalla adjuntas.

Para tu información: si los mapas se muestran pero la acción "usar mi ubicación" de los campos de dirección no funciona, comprueba que la Geocoding API está habilitada y autorizada en tu clave.