Autocompletado de direcciones (Google Maps)

Con el autocompletado de direcciones, Sami B2B Onboarding muestra las sugerencias de direcciones de Google en cuanto la persona compradora empieza a escribir su calle. Al elegir una sugerencia, se rellena el resto de esa dirección. Quien compra completa el formulario más rápido, y la ubicación de la empresa que la aplicación crea en Shopify queda con una dirección limpia.

Añades una sola clave de Google Maps para la tienda. Cada formulario activa o desactiva el autocompletado.

Nota

Antes de empezar, necesitas una cuenta de Google Cloud con la facturación configurada. Google la exige para poder usar sus API de Maps.

Crea una clave de navegador en Google Cloud

1. Elige un proyecto

   Abre la consola de Google Cloud y crea un proyecto, o elige el que quieras usar.

2. Activa las API

   En APIs & Services › Library, busca y activa Maps JavaScript API y, después, Places API. La primera carga las sugerencias en tu tienda online. La segunda busca las direcciones.

3. Crea la clave

   En APIs & Services › Credentials, haz clic en Create credentials › API key. Copia la clave. Empieza por AIza.

4. Restringe la clave a tu tienda

   Abre la configuración de la clave:

   1. En Application restrictions, elige Websites y añade cada dominio desde el que se accede a tu tienda, por ejemplo https://example.com/* y https://your-store.myshopify.com/*.
   2. En API restrictions, elige Restrict key y selecciona Maps JavaScript API y Places API.
   3. Haz clic en Save.

Precaución

La clave se escribe en la página de tu tienda online, por lo que cualquiera puede leerla allí. La restricción por sitio web es lo que impide que otra persona la use y aumente tu factura de Google. El panel de la aplicación te lo recuerda: This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

Añade la clave y actívala

1. Abre el panel Address autocomplete

   Ve a Forms y haz clic en Edit junto al formulario. En la barra de la izquierda, haz clic en Integrations. En Connected apps, haz clic en Set up en la fila Address autocomplete.

   Se abre el panel Address autocomplete con dos secciones: Account y This form.

   

   Haz clic en Set up para añadir tu clave; el panel explica qué campo recibe sugerencias y te recuerda que restrinjas la clave.

2. Pega la clave

   En Account, haz clic en Set up. En el cuadro de diálogo Address autocomplete, pega la clave en Maps API key y haz clic en Save. Verás Keys saved, y la fila Account mostrará la clave.

3. Actívalo

   En la parte inferior del panel, haz clic en Enable. El botón cambia a Disable, y la fila Address autocomplete de Connected apps muestra Active. Si aún no hay ninguna clave guardada, un aviso indica Add your Maps API key first.

4. Guarda el formulario

   Haz clic en Save en la barra de guardado. Verás Form saved.

Qué campos rellena

Las sugerencias aparecen en todos los campos asignados a Address line 1 en el panel Shopify del formulario. Como indica el panel, When a buyer starts typing in a field mapped to Address line 1, Google suggests addresses. Picking one fills that block’s city, state, postal code and country.

Cuando la persona elige una sugerencia, la aplicación rellena los campos de esa misma dirección que están asignados a:

Asignado a	Se rellena con
Address line 1	El número y el nombre de la calle
City	La ciudad o la localidad
State / province	El estado o la provincia
ZIP / postal code	El código postal
Country	El país

• Address line 2, Recipient y Phone se dejan para que los complete la persona.
• Las direcciones de envío y de facturación se mantienen separadas. Elegir una dirección de envío nunca cambia los campos de facturación.
• La persona puede seguir modificando cualquier campo que se haya rellenado.
• Las sugerencias aparecen en el idioma de la página de la tienda.

El formulario Wholesale application que crea la aplicación ya asigna estos campos para ambas direcciones. Si creas tus propias preguntas de dirección, asígnalas en Company location. Consulta Asigna las respuestas a Shopify.

Compruébalo en tu tienda online

1. Abre el formulario

   Ve a Forms y haz clic en Copy link junto al formulario. Abre el enlace en una ventana privada del navegador.

2. Escribe una dirección

   En Shipping address, empieza a escribir en Address line 1, por ejemplo 123 Main Street. La lista de sugerencias de Google se abre debajo del campo.

3. Elige una sugerencia

   Haz clic en una dirección de la lista. City, ZIP or postal code, Country y State or province se rellenan con esa dirección.

Si no aparece ninguna sugerencia:

Comprueba	Qué hacer
La fila Address autocomplete muestra Active y el formulario está guardado.	Haz clic en Enable en el panel y, después, en Save.
La restricción de sitios web de la clave incluye el dominio en el que estás haciendo la prueba.	Tu tienda responde en tu propio dominio y en su dominio myshopify.com. Añade ambos en Google Cloud.
Maps JavaScript API y Places API están activadas, y el proyecto tiene la facturación configurada.	Actívalas en APIs & Services › Library.
El campo está asignado a Address line 1.	Asígnalo en el panel Shopify, en Company location.

Desactívalo

• En un formulario: abre su panel Address autocomplete, haz clic en Disable y, después, en Save.
• En todos los formularios: en Account, haz clic en Change y, después, en Remove keys. El cuadro de diálogo advierte Every form in this store stops using Address autocomplete until you add keys again. Haz clic en Remove keys para confirmar.

Siguientes pasos

• Asigna las respuestas a Shopify — asigna tus preguntas de dirección para que rellenen la ubicación de la empresa.
• Crea tu formulario — añade campos de dirección a un formulario.
• Captcha (reCAPTCHA, hCaptcha) — mantén a los bots alejados del mismo formulario.