Configurar la clave API de Google Map

Configuración> Configuración general> pestaña API de terceros

Fig.1: Administrador: configuración de la clave de API de Google Map

El usuario debe tener una cuenta de Gmail para continuar. Inicie sesión en su cuenta de Gmail y luego siga los pasos a continuación.

Nota : omita este paso si ya ha creado un proyecto y ha configurado la pantalla de consentimiento vinculada a él. En este caso, seleccione el proyecto apropiado y luego siga los pasos proporcionados en la sección 1.2 para crear una nueva clave de desarrollador.

  1. Una vez que haya iniciado sesión en la cuenta de Google, visite https://console.developers.google.com/ para iniciar sesión en Google Cloud Platform . Como se muestra en la figura 2, el tablero se abrirá en la pantalla. Fig.2: Panel de control
  2. En el panel de control, haga clic en el menú desplegable "Seleccionar un proyecto " que se encuentra en el panel de navegación superior. Si no se ha creado ningún proyecto como se muestra en la figura 3, haga clic en el botón ' Nuevo proyecto' que se encuentra en la esquina superior derecha. Fig.3: Seleccionar un proyecto
  3. Aparecerá un formulario de 'Proyecto nuevo' como se muestra en la figura 4. El administrador debe:
    • Nombre del proyecto *: ingrese un nombre de proyecto único.
    • Organización *: seleccione la organización en la que desea crear un proyecto. Si es un usuario de prueba gratuito, omita este paso, ya que esta lista no aparece.
    • Ubicación *: ingrese la organización o carpeta principal. Ese recurso será el padre jerárquico del nuevo proyecto. Fig.4: Formulario de creación de nuevo proyecto
      Una vez que se hayan ingresado los campos de entrada, el administrador debe hacer clic en ' Crear ' para agregar el nuevo proyecto.
  4. Ahora, haga clic en la pestaña 'Credenciales ' del menú de navegación lateral que abrirá la página Credenciales como se muestra en la figura 5 a continuación. Fig.5: Página de credenciales
  5. Si no se han utilizado servicios de Google anteriormente , el siguiente paso será ' Configurar la pantalla de consentimiento '. Sin embargo, si ya utiliza otros servicios de Google, no es necesario volver a configurar la pantalla de consentimiento debido a que este botón no se mostrará a dichos usuarios.
    Para configurar una pantalla de consentimiento, haga clic en el botón ' Configurar pantalla de consentimiento ' que abrirá la página que se muestra en la figura 6. Fig.6: Página de configuración de la pantalla de consentimiento de OAuth
    Seleccione el tipo de usuario como ' Interno ' y luego haga clic en el botón 'Crear ' para continuar (recomendado para el modo de prueba ). La configuración de usuarios internos limitará las solicitudes de autorización a los miembros de la organización.
    Además, no hay necesidad de presentar la aplicación para su verificación.
    Los proyectos configurados con un tipo de usuario Externo están disponibles para cualquier usuario con una cuenta de Google (recomendado para el modo en vivo ). Sin embargo, aquí se requiere enviar su aplicación para verificación una vez que esté lista para ser publicada.
  6. El administrador será redirigido al formulario 'Editar registro de la aplicación ' como se muestra en la figura 7 a continuación. Este formulario incluye 3 pasos que se explican a continuación.
    El primer paso es configurar la ' Pantalla de consentimiento de OAuth ' que incluye las siguientes secciones:
    1. Información de la aplicación: ingrese los campos obligatorios que son Nombre de la aplicación y Correo electrónico de asistencia al usuario.
    2. Dominio de la aplicación : ingrese los dominios de la aplicación requeridos. Los campos no son obligatorios, pero el administrador puede ingresar la información para vincular su sitio web con la cuenta de análisis.
    3. Dominios autorizados : haga clic en el botón "Agregar dominio " para agregar las URL de dominio autorizado.
    4. Información de contacto del desarrollador : ingrese una dirección de correo electrónico válida que Google pueda usar para enviar notificaciones. Fig.7: Pantalla de consentimiento de OAuth
      Después de agregar toda la información necesaria, haga clic en el botón " Guardar y continuar" .
    5. El segundo paso es agregar ' Ámbitos '. Los campos proporcionados en este formulario no son obligatorios. Entonces, uno puede omitir el paso haciendo clic en ' Guardar y continuar '. Fig.8: Visores
    6. El tercer paso es ver el resumen . Fig.9: Resumen
      Haga clic en ' Guardar y continuar' para completar el proceso de configuración.

2. Crear clave de desarrollador

  1. En el panel de Google Cloud Platform, haga clic en el botón ' Crear credenciales ' y luego seleccione ' Clave API' en la lista desplegable. Fig.10: Página de credenciales
  2. Aparecerá una ventana emergente que muestra la clave API recién creada. Fig.11: Clave API creada
    Copie la clave y péguela en el campo de entrada de la clave del desarrollador que se proporciona en Configuración general> API de terceros> Configuración de la API de Google Map proporcionada en el panel de administración, como se muestra en la figura 1.
    La ' clave de desarrollador' también se puede copiar directamente haciendo clic en icono proporcionado a su derecha en la página "Credenciales " en la sección de claves API.
    NB : tenga en cuenta que una clave de desarrollador ya existente también se puede utilizar dos veces. Por lo tanto, si ha creado una clave de desarrollador al configurar el inicio de sesión de Google, la misma clave de desarrollador también se puede utilizar como API de Google Map.

3. Configure la facturación y habilite las aplicaciones de la API de mapas desde la biblioteca

Una vez que se haya configurado la clave en el panel de administración, siga los pasos adicionales a continuación en su cuenta de Google Cloud Platform :

  1. Asegúrese de haber vinculado una cuenta de facturación. Si no es así , siga los pasos a continuación. Si ya está configurado, omita este paso.
    Haga clic en el icono de menú de la esquina izquierda que abrirá una barra de menú de navegación izquierda.
    Seleccione la opción ' Facturación ' en el menú de navegación como se muestra en la figura 12 a continuación.
    Fig.12: Página del panel de API de Google
    La siguiente página mostrará el mensaje que se muestra en la figura 13 a continuación si no hay una cuenta de facturación vinculada con el proyecto actualmente abierto. Fig.13: Cuenta de facturación
    Siga los pasos según las instrucciones para agregar una nueva cuenta de facturación o vincular una cuenta de facturación ya agregada.
  2. Una vez que se vincule una cuenta de facturación, seleccione la opción 'API y servicios ' que se proporciona en la misma barra de navegación izquierda (debajo de Facturación). De la lista ampliada, haga clic en Biblioteca . Fig.14: Cuenta de facturación
  3. La página de la biblioteca API se abrirá como se muestra en la figura 15 a continuación. Además, vuelva a verificar si el proyecto correcto está seleccionado en el menú desplegable en el encabezado superior como se mencionó anteriormente. Fig.15: Página 'Bienvenido a la biblioteca API'
  4. El administrador debe habilitar los siguientes cuatro servicios de la biblioteca:
    • API de JavaScript de Maps: ingrese este nombre de servicio en la barra de búsqueda y abra esta página de servicio. Haga clic en el botón 'Habilitar '. Fig.16: API de JavaScript de Maps
    • API de Places : ingrese este nombre de servicio en la barra de búsqueda y abra esta página de servicio. Haga clic en el botón 'Habilitar '. Fig.17: API de Places
    • API de codificación geográfica: ingrese este nombre de servicio en la barra de búsqueda y abra esta página de servicio. Haga clic en el botón 'Habilitar '. Tenga en cuenta que es una biblioteca de servicio de pago. Fig.18: API de codificación geográfica
    • API estática de Maps : ingrese este nombre de servicio en la barra de búsqueda y abra esta página de servicio. Haga clic en el botón 'Habilitar '. Tenga en cuenta que es una biblioteca de servicio de pago. Fig.19: API estática de Maps

4. Prueba de la configuracióni.

  1. Vaya a la interfaz y seleccione la ubicación en la sección del encabezado superior. Una vez que los usuarios comiencen a escribir, aparecerá una lista de autocompletar basada en las palabras clave ingresadas en el cuadro de entrada. Fig.21: Seleccionar ubicación en el front-end
  2. En segundo lugar, haga una prueba de inicio de sesión en el 'Perfil del comprador ' y acceda a la sección 'Direcciones'> Mi dirección , haga clic en el botón editar y la lista de ubicaciones se obtendrá de la API de mapas configurada en el back-end. Entonces, si la ubicación se busca aquí, esto significa que la API configurada está funcionando correctamente.
  3. Por último, el administrador puede ver la ubicación de las tiendas del vendedor en su panel. Visite el módulo Tiendas en el panel de administración que incluye a todos los vendedores registrados en el sitio web. Haga clic en el botón Editar que se encuentra en el extremo derecho para abrir el menú emergente Configuración de la tienda. Fig.24: Formulario de configuración de la tienda (panel de administración)
    La ubicación de la tienda del vendedor se marcará en el mapa de Google además de la información recopilada en la pestaña Detalles generales. Esta ubicación se obtendrá según la dirección ingresada por el vendedor en el formulario anterior. Ayuda a identificar la ubicación exacta de las tiendas en el mapa. El mismo mapa se mostrará a los vendedores en el módulo 'Administrar tienda ' en la pestaña General .