En este artículo, te guiaremos a través del proceso de configuración de dos APIs esenciales para tu sitio web en eDirectory: Google Maps y Nearby Results API. Estas APIs trabajan juntas para mostrar mapas en tu sitio y mostrar listados relevantes según la ubicación del usuario.


Introducción


La API de Google Maps es responsable de mostrar mapas en tus listados, mientras que la API de Nearby Results garantiza que los usuarios vean listados cercanos a su ubicación en la página de búsqueda. En esta guía completa, encontrarás instrucciones paso a paso para configurar ambas APIs.

Instrucciones para la API de Google Maps


1. Creación de un Proyecto en Google API Console


1.1. Inicia sesión con tu cuenta de Google y accede a la Consola de API de Google Cloud Platform.
1.2. Haz clic en "Seleccionar un proyecto" y luego en "Nuevo proyecto".

1.3. Ingresa la siguiente información:

  • Nombre del proyecto: escribe el nombre de tu sitio.
  • Organización: selecciona tu organización.
  • Ubicación: selecciona tu ubicación.

Después de ingresar la información, haz clic en "Crear".

1.4. Una vez creado el proyecto, haz clic en el botón de menú, selecciona "APIs y servicios" y haz clic en "Biblioteca".

1.5. Selecciona la categoría "Maps".

1.6. Haz clic en Geocoding API y Maps JavaScript API o búscalos en la barra de búsqueda.

1.7. Selecciona "Habilitar" en ambas APIs.



Atención: Es posible que, después de hacer clic en "Habilitar", Google solicite que vincules tu proyecto a una cuenta de facturación. Este paso es necesario para mostrar los mapas en tu sitio web de eDirectory. Configura la facturación después de habilitar las APIs mencionadas.Sigue las instrucciones en pantalla para vincular una cuenta de facturación a tu proyecto de Google Maps. Google no permitirá la visualización de mapas en tu sitio si no se configura una cuenta de facturación, ya que cobra por el uso de su API.


1.8. Haz clic en el botón de menú, luego en "APIs y servicios" y selecciona la opción "APIs y servicios habilitados".

1.9. Luego, haz clic en Credenciales → Crear credenciales → Clave de API.

1.10. En la ventana emergente, haz clic en "Editar clave de API".



2. Configuración de la clave API en Google Maps


2.1. En la configuración de Google Maps, completa la siguiente información:

  • Nombre: puedes llamarlo "Google Maps".

  • Restricciones de aplicación: selecciona la opción "Referencias HTTP (sitios web)".

  • Restricciones de sitios web: agrega las siguientes URLs de tu sitio web:

    https://www.tusitio.com
https://tusitio.com
http://www.tusitio.com
http://tusitio.com


Aviso: Al configurar las restricciones del sitio web, reemplaza "tusitio" con tu dominio real. Además, presta atención a la estructura de los enlaces:
✅ Correcto: https://www.tusitio.com
❌ Incorrecto: https://www.tusitio.com/ (no debe terminar con "/")


2.2. Restricciones de API: selecciona las siguientes APIs habilitadas en el paso 1.7 y haz clic en Guardar:

  • Maps JavaScript API
  • Geocoding API


Aviso: Si no encuentras las APIs en la lista, repite el paso 1.7 para asegurarte de que estén habilitadas correctamente.



2.3. Luego de guardar los cambios, serás redirigido a una pantalla donde podrás copiar tu clave API. Haz clic en "Mostrar clave", copia el código y guárdalo.


2.4. Ve a Configuración → Integraciones de Google → Google Maps y pega la clave API en el campo correspondiente. Marca la casilla para habilitarla.



Aviso: Después de estos pasos, Google Maps estará correctamente configurado. Si los mapas no se muestran, verifica que tu cuenta de facturación esté activada en Google Cloud.



¿Cómo verificar si la API de Google Maps funciona correctamente?


Si has configurado una nueva clave API y deseas comprobar si funciona correctamente, sigue estos pasos:

  1. Verifica la visualización del mapa:

    • En el área de administración del sitio, ve a Configuración > Información básica.
    • Introduce cualquier dirección en los campos correspondientes y haz clic fuera del campo.
    • Si se genera un mapa, la API está funcionando correctamente.

  2. Revisa la facturación en Google Maps:

  3. Actualiza los listados:

    • Si configuraste la API después de haber creado listados, es posible que debas actualizarlos manualmente para que los mapas se muestren.
    • Para actualizar un listado:
      1. Haz clic dentro del campo de código postal.
      2. Haz clic fuera del campo (en cualquier parte de la página).
      3. El mapa debería generarse automáticamente.

  4. Habilita la visualización de mapas en los niveles de listado:

    • Ve a Configuración > Administrar niveles y precios.
    • Asegúrate de que los niveles de listado tienen habilitada la opción de mostrar mapas en la página de detalles.

Si encuentras algún problema o tienes más preguntas, no dudes en contactar a nuestro equipo de soporte en [email protected]. ¡Estamos aquí para ayudarte a garantizar una integración fluida y funcional de Google Maps en tu sitio web! ?