Automatisch aanvullen van adressen (Google Maps)

Met automatisch aanvullen van adressen toont Sami B2B Onboarding de adressuggesties van Google zodra een koper begint met het typen van de straatnaam. Als de koper een suggestie kiest, wordt de rest van dat adres automatisch ingevuld. Kopers zijn sneller klaar met het formulier en de bedrijfslocatie die de app in Shopify aanmaakt, krijgt een netjes adres.

Je voegt één Google Maps-sleutel toe voor de winkel. Per formulier zet je automatisch aanvullen aan of uit.

Opmerking

Voordat je begint, heb je een Google Cloud-account nodig waarvoor facturering is ingesteld. Google vraagt hierom voordat de Maps-API’s gebruikt kunnen worden.

Een browsersleutel maken in Google Cloud

1. Kies een project

   Open de Google Cloud-console en maak een project aan, of kies het project dat je wilt gebruiken.

2. Schakel de API’s in

   Zoek in APIs & Services › Library naar Maps JavaScript API en schakel die in, en doe daarna hetzelfde voor Places API. De eerste laadt de suggesties in je webshop. De tweede zoekt de adressen op.

3. Maak de sleutel

   Klik in APIs & Services › Credentials op Create credentials › API key. Kopieer de sleutel. Die begint met AIza.

4. Beperk de sleutel tot je winkel

   Open de instellingen van de sleutel:

   1. Kies onder Application restrictions de optie Websites en voeg elk domein toe waarop je winkel bereikbaar is, bijvoorbeeld https://example.com/* en https://your-store.myshopify.com/*.
   2. Kies onder API restrictions de optie Restrict key en selecteer Maps JavaScript API en Places API.
   3. Klik op Save.

Opgepast

De sleutel staat in de pagina van je webshop, dus iedereen kan hem daar lezen. De websitebeperking voorkomt dat iemand anders hem gebruikt en jouw Google-rekening laat oplopen. Het paneel van de app herinnert je eraan: This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

De sleutel toevoegen en inschakelen

1. Open het paneel Address autocomplete

   Ga naar Forms en klik naast het formulier op Edit. Klik in de balk links op Integrations. Klik onder Connected apps op Set up in de rij Address autocomplete.

   Het paneel Address autocomplete opent met twee secties: Account en This form.

   

   Klik op Set up om je sleutel toe te voegen. Het paneel legt uit welk veld suggesties krijgt en herinnert je eraan de sleutel te beperken.

2. Plak de sleutel

   Klik onder Account op Set up. Plak in het dialoogvenster Address autocomplete de sleutel in Maps API key en klik op Save. Je ziet Keys saved en de rij Account toont de sleutel.

3. Schakel het in

   Klik onderaan het paneel op Enable. De knop verandert in Disable en de rij Address autocomplete onder Connected apps toont Active. Als er nog geen sleutel is opgeslagen, staat er een banner met Add your Maps API key first.

4. Sla het formulier op

   Klik op Save in de opslagbalk. Je ziet Form saved.

Welke velden worden ingevuld

Suggesties verschijnen in elk veld dat is gekoppeld aan Address line 1 in het paneel Shopify van het formulier. Zoals het paneel zegt: 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.

Wanneer de koper een suggestie kiest, vult de app de velden van hetzelfde adres in die zijn gekoppeld aan:

Gekoppeld aan	Ingevuld met
Address line 1	Het huisnummer en de straatnaam
City	De plaats of stad
State / province	De staat of provincie
ZIP / postal code	De postcode
Country	Het land

• Address line 2, Recipient en Phone laat de app leeg, zodat de koper ze zelf invult.
• Het verzendadres en het factuuradres worden gescheiden gehouden. Als je een verzendadres kiest, veranderen de factuurvelden nooit.
• De koper kan elk ingevuld veld nog aanpassen.
• De suggesties staan in de taal van de winkelpagina.

Het formulier Wholesale application dat de app aanmaakt, koppelt deze velden al voor beide adressen. Als je zelf adresvragen bouwt, koppel je ze in Company location. Zie Antwoorden koppelen aan Shopify.

Controleer het in je webshop

1. Open het formulier

   Ga naar Forms en klik naast het formulier op Copy link. Open de link in een privévenster van je browser.

2. Typ een adres

   Begin onder Shipping address te typen in Address line 1, bijvoorbeeld 123 Main Street. De lijst met suggesties van Google opent onder het veld.

3. Kies een suggestie

   Klik op een adres in de lijst. City, ZIP or postal code, Country en State or province worden voor dat adres ingevuld.

Als er geen suggesties verschijnen:

Controleer	Wat je moet doen
De rij Address autocomplete toont Active en het formulier is opgeslagen.	Klik in het paneel op Enable en daarna op Save.
De websitebeperking van de sleutel bevat het domein waarop je test.	Je winkel is bereikbaar op je eigen domein en op het myshopify.com-domein. Voeg beide toe in Google Cloud.
Maps JavaScript API en Places API zijn ingeschakeld en facturering is ingesteld voor het project.	Schakel ze in via APIs & Services › Library.
Het veld is gekoppeld aan Address line 1.	Koppel het in het paneel Shopify, onder Company location.

Uitschakelen

• Voor één formulier: open het paneel Address autocomplete, klik op Disable en daarna op Save.
• Voor alle formulieren: klik onder Account op Change en daarna op Remove keys. Het dialoogvenster waarschuwt: Every form in this store stops using Address autocomplete until you add keys again. Klik op Remove keys om te bevestigen.

Volgende stappen

• Antwoorden koppelen aan Shopify — koppel je adresvragen zodat ze de bedrijfslocatie invullen.
• Je formulier bouwen — voeg adresvelden toe aan een formulier.
• Captcha (reCAPTCHA, hCaptcha) — houd bots weg van hetzelfde formulier.