Googlemaps address autocomplete (Vue.js)

Description:

Vue.js package that helps you to seamlessly integrate the "auto suggest" and "autocomplete" feature of Google Maps' API.
Google API has developped a nice auto-suggests feature that will help users as they type an address into a form. This component is build on top of that Google feature and will thus:

• auto-suggest the available address from Google Maps
• prepopulate the address fields as the user select an address in the list

---

Usage

1. Register on Google console

Google Maps Platform to get an API key from Google.

2. npm install this package

https://www.npmjs.com/package/vue-google-maps-address-autocomplete

 npm i vue-google-maps-address-autocomplete

OR

 yarn add vue-google-maps-address-autocomplete

3. Define your $googleApiKey ! Required !

 // Vue 2
Vue.prototype.$googleMapsApiKey = 'yourApiKey';

// Vue 3
Vue.config.globalProperties.$googleMapsApiKey = 'yourApiKey';

4. Register globally or locally this component.

Globally in main.js

 import AddressAutocomplete from 'vue-google-maps-address-autocomplete';
Vue.use(AddressAutocomplete);

Locally in a component.vue

 import AddressAutocomplete from 'vue-google-maps-address-autocomplete';
export default {
  ...,
  components: { addressAutocomplete },
  ...
};

5. Component interface:

The feature is implemented through a wrapper component: <address-autocomplete>slot</address-autocomplete>.
The component will expose a slot giving you the possibility to structure and style your component anyway you want. This package does not provide any design implementation as this is purely a renderless component that will just provide some JS logic to implement the autosuggest & autocomplete functionalities.

Example of usage

<template>
  <address-autocomplete
    v-slot="{ addressAutocompleteRef, loadGoogleMapsScript }"
    @update-address="populateAutocompletedAddress"
  >
    // Here comes your code
    <div>
      <input
        v-model="address.streetName"
        :ref="addressAutocompleteRef"
        @input.once="loadGoogleMapsScript"
      >
      <input v-model="address.streetNumber">
      <input v-model="address.streetBox">
      <input v-model="address.zipCode">
      <input v-model="address.city">
    </div>
  </address-autocomplete>
</template>

<script>
  export default {
    data () {
      return {
        address: { streetName, streetNumber, zipCode, city }
      }
    },
    ...,
    methods: {
      populateAutocompletedAddress (autocompletedAddress) {
        // Here you assign the autocompletedAddress to your address data.
        this.address = { ...this.address, ...autocompletedAddress };
      }
    }
  }
</script>

---

Properties & Events:

1. Ref [REQUIRED]
It exposes the addressAutocompleteRef attribute. This attribute is required on your "auto suggest" input with a :ref binding. This is the input where the client will start typing and the suggestions from GoogleMaps will show up.

 <input v-model="address.streetName" :ref="addressAutocompleteRef">

2. Props
This provides the option to restrict the suggestions to specific countries. Props must be passed as a two-character, ISO 3166-1 Alpha-2 compatible country code (i.e. "br", "sg", "fr") in an array.

• props: countryRestrictions
• Default is: ["be"]
• Type: Array

 <address-autocomplete
  v-slot="{ addressAutocompleteRef, loadGoogleMapsScript }"
  @update-ddress="populateAutocompletedAddress"
  :country-restrictions="['au', 'nz']"
>
  <slot></slot>
</address-autocomplete>

3. Methods
Exposes a loadGoogleMapsScript [REQUIRED] method to asynchronously load the GoogleMaps script . This way, you're in control of when the script is actually loaded (ie: when user touches the input or @mounted).

 <input v-model="address.streetName" @input.once="loadGoogleMapsScript">

4. Hook
It exposes the @update-address hook that is triggered when the user select an option in the available list, passing the autocompletedAddress. This will prepopulated the address fields:

• streetName
• streetNumber
• zipCode
• city

 methods: {
  populateAutocompletedAddress (autocompletedAddress) {
    this.address = { ...this.address, ...autocompletedAddress };
  }
}

---

Use with care and enjoy 😉