Clave API de Google Maps

Paso 1 — Entra en la Google Cloud Console

Abre la consola de Google Cloud e inicia sesión con una cuenta de Google (vale una cuenta normal de Gmail).

Abrir Google Cloud Console

💡 Consejo: usa una cuenta empresarial dedicada, no la personal, para mantener todo ordenado.

Paso 2 — Crea un proyecto

Un "proyecto" es el contenedor donde vivirán tu clave y tus ajustes.

1. Arriba, junto al logo de "Google Cloud", haz click en el desplegable del proyecto.
2. Haz click en Nuevo proyecto.
3. Ponle un nombre reconocible, p. ej. RoyLead Maps, y haz click en Crear.
4. Asegúrate de que, arriba, esté seleccionado el proyecto recién creado.

Paso 3 — Activa la facturación

Google exige una tarjeta vinculada incluso para usar el nivel gratuito. Sin facturación activa verás un error o la marca de agua "For development purposes only".

1. En el menú de la izquierda (☰), ve a Facturación.
2. Haz click en Vincular una cuenta de facturación.
3. Introduce tus datos y una tarjeta, luego confirma.

🔒 Añadir la tarjeta no significa que vayas a pagar. Google solo cobra si superas el umbral gratuito mensual, algo muy improbable para una landing page. Más abajo te explico cómo configurar una alerta de presupuesto.

Paso 4 — Activa las API necesarias

Tienes que encender los servicios de Google que usa el autocompletado de direcciones.

1. En el menú (☰), ve a APIs y servicios → Biblioteca.
2. Busca y activa una por una estas tres API (para cada una: ábrela y haz click en Habilitar):

• Maps JavaScript API — el mapa y el campo con las sugerencias.
• Places API — las sugerencias de dirección en sí.
• Geocoding API — recupera el código postal cuando Google no lo da (ver el recuadro de abajo).

ℹ️ Activar una API no cuesta nada: solo pagas según el uso real. Actívalas las tres para evitar errores del tipo "This API is not enabled".

📮 Por qué hace falta la Geocoding API. Google adjunta el código postal al número de la casa: quien elige la sugerencia de solo la calle se queda sin él, y el formulario no se envía si el código postal es obligatorio. Cuando falta, lo recuperamos a partir de las coordenadas de la dirección elegida — es una llamada extra, y solo en esos casos. Sin esta API no se rompe nada: el cliente lo escribe a mano.

ℹ️ Places API (New) no hace falta: nuestro formulario usa el autocompletado clásico. Si ya la activaste, da igual dejarla activada o desactivarla.

Paso 5 — Crea la clave de API

1. En el menú (☰), ve a APIs y servicios → Credenciales.
2. Haz click en + Crear credenciales → Clave de API.
3. Google genera la clave: una cadena larga tipo AIzaSyB3xK...d9F2qZ.
4. Cópiala (la pegarás en RoyLead en el Paso 7). No cierres todavía: primero vamos a restringirla.

⚠️ Nunca compartas esta clave en chats públicos, capturas de pantalla o repositorios. Aunque la restrinjas, trátala como una contraseña.

Paso 6 — Restringe la clave (importante para la seguridad)

La clave acaba en el código de la landing page, así que es visible para cualquiera que mire el código fuente. Para evitar que alguien la copie y la use a tu costa, hay que restringirla. Abre la clave desde la página Credenciales (icono de lápiz) y configura dos restricciones.

6a — Referencias HTTP (desde qué sitios puede usarse)

1. En Restricciones de aplicación, selecciona Referencias HTTP (sitios web).
2. Añade las URLs del dominio donde usarás la clave (ambas líneas):

https://tudominio.com/*
https://*.tudominio.com/*

Sustituye tudominio.com por tu dominio. ¿Tienes varios dominios? Mejor crear una clave separada por dominio (en RoyLead la clave es por dominio).

6b — Restricciones de API

1. En Restricciones de API, selecciona Restringir clave.
2. Marca solo: Maps JavaScript API, Places API, Geocoding API.
3. Guardar.

⚠️ Las restricciones pueden tardar hasta 5 minutos en aplicarse. Si ves un error justo después, espera unos minutos y vuelve a intentarlo.

Paso 7 — Pega la clave en RoyLead

1. Abre los ajustes del dominio en RoyLead.
2. Selecciona el dominio donde quieres activar el autocompletado.
3. Pega la clave en el campo Google Maps API Key y guarda.

Ir a Dominios ↗

Paso 8 — Comprueba que funciona

1. Abre una landing page publicada en ese dominio.
2. En el formulario, empieza a escribir una dirección (p. ej. "Calle Roma…").
3. Deberían aparecer las sugerencias de Google: elige una y el campo se rellena. ✅

Si no aparecen sugerencias, mira la sección "Solución de problemas".

Cuánto cuesta

Google ofrece un uso gratuito mensual para las API de Maps/Places. Para los volúmenes típicos de una landing page casi siempre te quedas dentro del gratis y pagas 0 €. La tarjeta solo sirve de garantía y para cubrir posibles excesos.

Para estar tranquilo, configura una alerta de presupuesto:

1. Menú (☰) → Facturación → Presupuestos y alertas.
2. Crear presupuesto, umbral bajo (p. ej. 5 €), alerta por email.

💳 El Places Autocomplete hace una petición en cada tecla pulsada: 1 lead = un puñado de peticiones, no solo una. Aun así, para pagar de verdad harían falta varios miles de formularios rellenados al mes.

Solución de problemas

💡 Para depurar: abre la landing, pulsa F12 → pestaña Console. Los errores de Google Maps aparecen ahí con el nombre exacto: búscalo en la tabla de arriba.

Buenas prácticas

• 🔑 Una clave por dominio (en RoyLead la clave es por dominio): si una se filtra, solo bloqueas esa.
• 🔒 Restringe siempre la clave (Paso 6): una clave sin restricciones es una clave que alguien usará a tu costa.
• 🚨 Mantén activa la alerta de presupuesto.