Vue Google autocomplete with multiple input fields.

Requirements
- Google api link with api key
- Vue Google AutoComplete
- Vue Js

Before we start, we have to include google api link in our app first.

Example google api link

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=thisisyourkey&amp;libraries=places"></script>

1 — Install vue-google-autocomplete

Firstly, let’s intall vue-google-autocomplete into our project with this command.

npm install vue-google-autocomplete --save

or

yarn add vue-google-autocomplete

2— Import into your project.

And we can just directly import vue-google-autocomplete into our vue component as below.

<script>
// import Auto complete google map
import VueGoogleAutocomplete from ‘vue-google-autocomplete’
 export default {
//use as a component
 components: {VueGoogleAutocomplete},
 data: function() {
  return {........}
 }
}
</script>

3 — Use vue-google-autocompete syntax inside the template

After we imported the vue-google-autocomplete plugin then we can start adding input syntax inside the template.

<template>
<vue-google-autocomplete
    id="from_address"
    classname="form-control"
    placeholder="Start typing"
    v-on:placechanged="getFromAddress"
    v-on:error="handleError"
>
</vue-google-autocomplete>
<vue-google-autocomplete
    id="to_address"
    classname="form-control"
    placeholder="Start typing"
    v-on:placechanged="getToAddress"
    v-on:error="handleError"
>
</vue-google-autocomplete>
</template>

As you can see I added two different input ids, one is from_address and another one is to_address.
- Here is a trick, if the id name is the same for both inputs, it’s not going to work.

4 — Types Attribute [updated]

<vue-google-autocomplete
    types=""
    id="to_address"
    classname="form-control"
    placeholder="Start typing"
    v-on:placechanged="getToAddress"
    v-on:error="handleError"
>
</vue-google-autocomplete>

If there is no types attribute, vue-google-autocomplete will only fetch the street address (by default), instead of fetching all the addresses. So, put the attribute types and set the value to blank. It will fetch all Google map addresses.
You can also set the (argument) value of types to cities , regions. Check the example here

5 — Define the input variables.

<script>
 ....
 data: function() {
       return {
                from_address:{},
                to_address:{}
        }
  },
  ....
</script>

6 — Add methods for the response data.

And we can get the response data on placechanged.
we can pass 3 parameters for the map data.

1 — Address data

2 — Place result data

3 — The map id

<script>
methods:{
            getFromAddress(from_address, placeResultData, id) {
                this.from_address = from_address;
                console.log(from_address);
            },
            getToAddress(to_address, placeResultData, id){
                this.to_address = to_address;
                console.log(to_address);
            },
            handleError(error){
                alert(error)
            }
}
</script>

Here, I just console.log the response data. In your case, you can bind it or append it into your vue app as you like. Thanks for reading.

Boilerplate — https://github.com/ronaldaug/google-vue-autocomplete-boilerplate

Reference— https://github.com/olefirenko/vue-google-autocomplete