Search Knowledge Base Articles

Intergrate Google Maps Adddress Auto Complete with FlexiShop

Purpose: configure Google Maps address autocomplete for the Add New Client popup, store the selected address details, and keep the setup secure and maintainable.

 

1. What this integration does

·         Adds Google-powered address suggestions to the Add New Client form.

·         Lets the user choose a result, then fills Address, City, County/State, Postcode, Country, Latitude, and Longitude.

·         Uses the module setting “Address Provider = Google” together with a Google API key.

·         Biases or restricts results to the United Kingdom when your module setting is set to GB.

2. Prerequisites

·         A Google Cloud project with billing enabled.

·         Maps JavaScript API enabled in that project.

·         Places API enabled in that project.

·         A production API key restricted to your website domain(s).

·         A FlexiShop module settings page with a Google provider option and an API key field.

3. Recommended module settings

Setting

Recommended value

Notes

Address provider

Google

Switches autocomplete from OpenStreetMap to Google.

Google Maps API key

Your browser key

Use a key restricted to your site domain.

Google country code

GB

Biases or restricts autocomplete to United Kingdom results.

Default country

United Kingdom

Keep this as the customer form default.

Language

en-GB

Optional, but useful for UK formatting.

 

4. Google Cloud setup

·         Open Google Cloud Console and select or create the project you want to use for this module.

·         Attach a billing account to the project.

·         Enable both Maps JavaScript API and Places API.

·         Create an API key for browser use.

·         Add HTTP referrer restrictions for your live domain and any staging domain.

·         Restrict the key so it is only allowed to call the APIs this module needs.

5. Script loading example

Load the Maps JavaScript API with the places library. Replace YOUR_API_KEY with the key stored in module settings.

<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places">
</script>

 

6. Example integration for the Add New Client modal

This example keeps your existing Address input and attaches Google autocomplete when the modal opens.

<input type="text" id="client_address" name="address" class="form-control">

<script>
let fsAutocomplete;

async function flexishopInitGoogleAutocomplete() {
  if (!window.google || !google.maps) return;

  const input = document.getElementById('client_address');
  if (!input || fsAutocomplete) return;

  const { Autocomplete } = await google.maps.importLibrary('places');

  fsAutocomplete = new Autocomplete(input, {
    fields: ['address_components', 'formatted_address', 'geometry', 'name'],
    componentRestrictions: { country: ['gb'] },
    types: ['address']
  });

  fsAutocomplete.addListener('place_changed', function () {
    const place = fsAutocomplete.getPlace();
    if (!place) return;

    const components = place.address_components || [];
    const map = {};
    components.forEach(function (c) {
      (c.types || []).forEach(function (t) {
        map[t] = c.long_name;
      });
    });

    const city =
      map.postal_town ||
      map.locality ||
      map.administrative_area_level_2 ||
      '';

    const county = map.administrative_area_level_1 || '';
    const postcode = map.postal_code || '';

    document.querySelector('[name="address"]').value =
      place.formatted_address || input.value || '';
    const cityField = document.querySelector('[name="city"]');
    const stateField = document.querySelector('[name="state"]');
    const zipField = document.querySelector('[name="zip"]');
    const countryField = document.querySelector('[name="country"]');
    const latField = document.querySelector('[name="latitude"]');
    const lngField = document.querySelector('[name="longitude"]');

    if (cityField) cityField.value = city;
    if (stateField) stateField.value = county;
    if (zipField) zipField.value = postcode;
    if (countryField) countryField.value = 'GB';
    if (latField) latField.value = place.geometry?.location?.lat?.() ?? 0;
    if (lngField) lngField.value = place.geometry?.location?.lng?.() ?? 0;
  });
}

document.addEventListener('DOMContentLoaded', flexishopInitGoogleAutocomplete);
$('#addClientModal').on('shown.bs.modal', flexishopInitGoogleAutocomplete);
</script>

 

7. Server-side handling

·         Do not rely only on the browser. On save, force safe defaults for latitude and longitude when the request is empty.

·         Keep country defaulting to United Kingdom on the server as a fallback even if the UI does not send it.

·         Create the customer first, then create the contact in a second step linked to that customer ID.

·         Validate that the submitted key fields exist before calling any insert logic.

$data['country']   = !empty($data['country']) ? $data['country'] : $uk_country_id;
$data['latitude']  = isset($data['latitude']) && $data['latitude'] !== '' ? $data['latitude'] : 0;
$data['longitude'] = isset($data['longitude']) && $data['longitude'] !== '' ? $data['longitude'] : 0;

 

8. Testing checklist

·         Open New Repair Job and click Add New Client.

·         Confirm the country defaults to United Kingdom before typing an address.

·         Start typing a UK address and check that suggestions appear.

·         Select a result and confirm Address, City, County/State, Postcode, Latitude, and Longitude are filled.

·         Save the customer and confirm only one customer record is created.

·         Confirm the contact is created afterwards and linked to the same customer.

·         Confirm the new customer is auto-selected in the repair job form.

9. Troubleshooting

Problem

What to check

No suggestions appear

Check that Maps JavaScript API and Places API are enabled, the API key is valid, and the browser console is not showing a referrer or billing error.

Works on staging but not live

Update HTTP referrer restrictions to include the live domain and any www / non-www variations.

Latitude still null

Confirm hidden latitude and longitude inputs exist in the form and the server still forces 0 defaults.

Country is not UK by default

Set the UI default to GB and also set the server fallback to the United Kingdom country ID from the Perfex countries table.

Unexpected non-UK results

Check componentRestrictions country = gb and confirm your module setting stores GB, not UK.

 

10. Security and policy notes

·         Use a browser key only for the browser-side JavaScript integration.

·         Keep server-side web-service keys private and never expose them in client-side code.

·         Restrict production keys by HTTP referrer and by allowed APIs.

·         Review Google Maps attribution, privacy policy, and terms requirements before going live.

11. Suggested settings text for your module

Address Provider: Google
Google Maps API Key: [paste browser key]
Google Country Code: GB
Default Country: United Kingdom
Language: en-GB

 

12. Official references

·         Google Maps Platform — Getting started

·         Set up the Maps JavaScript API

·         Set up the Places API (New)

·         Place Autocomplete Widget / Place Autocomplete Overview

·         Google Maps Platform security guidance

·         Policies and attributions for Maps JavaScript API

Did you find this article useful?

Related Articles