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
Google Maps Platform to get an API key from Google.
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
// Vue 2
Vue.prototype.$googleMapsApiKey = 'yourApiKey';
// Vue 3
Vue.config.globalProperties.$googleMapsApiKey = 'yourApiKey';
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 },
...
};
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>
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 😉