Cómo configurar la clave API de Google Maps en tu sitio web

Aprende a configurar la clave API de Google Maps en tu sitio web

Google Maps

Introducción

En este documento de ayuda, te guiaremos en el proceso de configuración de Google Maps para tu sitio web de Plone. Agregar Google Maps a tus listados de propiedades mejora tu sitio web y proporciona una mejor experiencia a los posibles compradores. Este documento te llevará paso a paso, desde la creación de una cuenta de Google hasta la integración del mapa en tu sitio web.

Requisitos Previos

Para configurar Google Maps en tu sitio web de Plone, necesitarás lo siguiente:

✓ Una cuenta de Google

✓ Acceso a las herramientas de edición de tu sitio web

✓ Familiaridad básica con la edición de sitios web

Paso 1 — Crear una Cuenta de Google

gmaps-02.webp

Si ya tienes una cuenta de Google, puedes saltarte este paso. De lo contrario, sigue estas instrucciones:

  1. Ve a la página de creación de cuentas de Google accounts.google.com/signup.
  2. Haz clic en "Crear cuenta" y selecciona "Para mí".
  3. Completa tus datos:
    • Nombre y apellido
    • Escoge un nombre de usuario (por ejemplo, tu correo comercial)
    • Crea una contraseña segura
  4. Sigue las indicaciones para verificar tu número de teléfono y proporcionar información adicional.

Importante: Usa tu correo comercial si es posible, ya que se ve más profesional.

Paso 2 — Configurar Google Cloud Platform

Una vez que tengas una cuenta de Google, necesitas configurar Google Cloud Platform:

gmaps-04.webp

  1. Ve a la consola de Google Cloud console.cloud.google.com.
  2. Inicia sesión con tu cuenta de Google.
  3. Haz clic en "Seleccionar un proyecto" en la esquina superior izquierda y luego en el enlace "Nuevo proyecto".
  4. Nombra tu proyecto (por ejemplo, "TuAgencia-Maps").
  5. Haz clic en "Crear".

Luego, configura la facturación:

gmaps-05.webp

  1. En la barra lateral izquierda, haz clic en "Facturación".
  2. Haz clic en "Vincular una cuenta de facturación".
  3. Selecciona "Crear una nueva cuenta de facturación".
  4. Ingresa la información de tu empresa y el método de pago.
  5. Revisa y acepta los términos del servicio.

Nota: Google ofrece un generoso nivel gratuito para la mayoría de los servicios, por lo que probablemente no incurrirás en cargos por uso típico.

Paso 3 — Habilitar los Servicios de Google Maps

Ahora necesitas activar los servicios necesarios de Google Maps:

gmaps-08.webp

    1. En la barra lateral izquierda de la consola de Google Cloud, haz clic en "APIs y servicios" > "Biblioteca".
    2. En la barra de búsqueda, escribe "Maps".
    3. Habilita el siguiente servicio:

      Maps JavaScript API

    4. Haz clic en el servicio y presiona "Habilitar".

Paso 4 — Crear y Proteger tu Clave API

Tu clave API es un código especial que permite a tu sitio web utilizar Google Maps:

gmaps-09.webp

  1. En la barra lateral izquierda, haz clic en "APIs y servicios" > "Credenciales".
  2. Haz clic en "Crear credenciales" en la parte superior de la página.
  3. Selecciona "Clave API".
  4. Copia tu nueva clave API, la necesitarás más tarde.

gmaps-11.webp

Para asegurar tu clave API:

  1. Después de copiar tu clave, haz clic en "Editar clave API".
  2. Bajo "Restricciones de la aplicación", selecciona "Referencias HTTP (sitios web)".
  3. En "Restricciones de sitios web", ingresa la dirección de tu sitio web (por ejemplo, *.tuagencia.com/*).
  4. Haz clic en "Guardar".

Importante: Mantén tu clave API privada. No la compartas públicamente ni con personas que no deban tener acceso a ella.

gmaps-12.webp

Paso 5 — Agregar Google Maps a tu Sitio Web de Plone

Ahora que tienes tu clave API de Google Maps, debes agregarla a tu sitio web. Como tu sitio está construido con Plone 5 CMS y usa el complemento Propertyshelf MLS Embedding, sigue estos pasos:

gmaps-14.webp

  1. Inicia sesión en tu sitio web de Plone como administrador.
  2. Busca el menú de usuario en la esquina inferior izquierda de la pantalla. Debería mostrar tu nombre de usuario.
  3. Haz clic en tu nombre de usuario para abrir el menú.
  4. Selecciona "Configuración del sitio" desde este menú.
  5. En la página de Configuración del sitio, desplázate hasta el final.
  6. En la última sección etiquetada como "Configuración del complemento", encuentra y haz clic en "Propertyshelf MLS Embedding".
  7. En la configuración de Propertyshelf MLS Embedding, haz clic en la pestaña "UI".
  8. Busca el campo etiquetado como "Clave API de Google Maps".
  9. Pega tu clave API de Google Maps en este campo.
  10. Haz clic en "Guardar" al final de la página.

gmaps-16.webp

Paso 6 — Probar tu Mapa

Después de agregar la clave API de Google Maps a tu sitio web de Plone:

gmaps-17.webp

  1. Ve a una de tus páginas de listado de propiedades.
  2. Verifica que el mapa se cargue correctamente y muestre la ubicación de la propiedad.
  3. Prueba en diferentes dispositivos (computadora, teléfono móvil, tableta) para asegurarte de que funcione bien en todas las pantallas.

Si el mapa no aparece o encuentras problemas:

  • Verifica que hayas ingresado correctamente la clave API de Google Maps en la configuración de Propertyshelf MLS Embedding.
  • Asegúrate de haber completado todos los pasos anteriores en esta guía.
  • Si los problemas persisten, contacta a tu administrador de sitio web o a nuestro equipo de soporte para recibir ayuda.

Paso 7 — Gestionar Costos y Uso

Para realizar un seguimiento del uso y los costos de Google Maps:

  1. En la consola de Google Cloud, ve a "Facturación" > "Resumen de facturación".
  2. Aquí puedes ver los cargos actuales y configurar presupuestos.

Para configurar una alerta de presupuesto:

  1. Haz clic en "Presupuestos y alertas" en la barra lateral izquierda.
  2. Haz clic en "Crear presupuesto".
  3. Establece el monto deseado para el presupuesto y configura umbrales de alerta.

Consejo: Comienza con una alerta de presupuesto bajo (por ejemplo, $10) para monitorear el uso de cerca.

Preguntas Frecuentes (FAQs) y Problemas Comunes

P1: El mapa no aparece en mis listados de propiedades. ¿Qué debo verificar?
R: Si tu mapa no aparece, prueba estos pasos:

  • Asegúrate de haber ingresado correctamente la clave API de Google Maps en la configuración de Propertyshelf MLS Embedding.
  • Verifica que hayas habilitado los servicios necesarios de Google Maps en tu consola de Google Cloud.
  • Confirma que tu información de facturación esté actualizada en la consola de Google Cloud.
  • Intenta borrar la caché de tu navegador y recargar la página.

P2: Mi clave API no funciona. ¿Qué podría estar mal?
R: Podría haber varias razones:

  • Revisa que estés usando la clave API correcta.
  • Examina las restricciones de la clave en la página de credenciales de la consola de Google Cloud.
  • Asegúrate de que la dirección de tu sitio web esté listada en los referers HTTP.
  • Verifica que la API de JavaScript de Maps esté seleccionada bajo restricciones de API.
  • Intenta crear una nueva clave API y usarla en su lugar.

P3: Tengo múltiples cuentas de facturación. ¿Cuál debería usar?
R: Es mejor usar solo una cuenta de facturación si es posible. Si necesitas usar varias:

  • Asegúrate de que la cuenta de facturación correcta esté conectada a tu proyecto en la consola de Google Cloud.
  • Puedes cambiar la cuenta de facturación conectada en la sección de Facturación.
  • Ten en cuenta que cambiar las cuentas de facturación podría interrumpir brevemente tus servicios.

P4: ¿Cómo puedo evitar cargos inesperados?
R: Para mantener tus costos bajo control:

  • Configura alertas de presupuesto en la sección de Facturación de la consola de Google Cloud.
  • Revisa regularmente el uso de tu API en el panel de control de APIs y servicios.
  • Usa restricciones adecuadas en la clave API para evitar un uso no autorizado.

P5: El mapa estaba funcionando antes, pero dejó de hacerlo después de que hice cambios en mi cuenta. ¿Por qué?
R: Los cambios en tu cuenta a veces pueden afectar la configuración de tu mapa:

  • Verifica que la API de JavaScript de Maps siga habilitada en tu consola de Google Cloud.
  • Asegúrate de que tu cuenta de facturación esté correctamente conectada.
  • Confirma que las restricciones de tu clave API no hayan cambiado.
  • Revisa cualquier cambio reciente en tu consola de Google Cloud y deshazlos si es necesario.

P6: He intentado todo y el mapa aún no funciona. ¿Qué debo hacer?
R: Si has seguido todos los pasos de solución de problemas y el mapa aún no funciona:

  1. Intenta acceder a tu página de listado de propiedades usando otro navegador o dispositivo para descartar problemas locales.
  2. Si el problema persiste, es momento de buscar ayuda de un experto. Esto es lo que debes hacer:
    • Abre las herramientas de desarrollador de tu navegador (generalmente presionando F12 o haciendo clic derecho y seleccionando "Inspeccionar").
    • Busca cualquier mensaje de error relacionado con Google Maps o JavaScript.
    • Toma una captura de pantalla de los errores que encuentres.
    • Envía un correo a support@propertyshelf.com con:
      • Una descripción del problema
      • Los pasos que ya has seguido para tratar de solucionarlo
      • La captura de pantalla de cualquier error
      • La URL de tu sitio web. Nuestro equipo de soporte creará un ticket y se pondrá en contacto contigo para ofrecerte más asistencia.

Conclusión

En esta guía, hemos cubierto los pasos esenciales para agregar Google Maps a tu sitio web de Plone construido con Plone CMS. Al seguir estas instrucciones, has mejorado tus listados de propiedades con mapas interactivos, facilitando a los posibles compradores ver las ubicaciones de las propiedades. Recuerda mantener tu clave API privada y monitorear tu uso para aprovechar al máximo esta valiosa herramienta.

¿Aún necesita ayuda?

Contáctenos