I am trying to implement Google Places Autoplete in Vue.js.

The API states that the Autoplete class first takes an inputField:HTMLInputElement, as used in their example:

autoplete = new google.maps.places.Autoplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autoplete')),
    {types: ['geocode']});

Since we cannot pass elements around by their ID's in Vue.js? How would this be achieved, and what kind of construct would we pass?

e.g. the following code fails

<template>
  <input id="autoplete" placeholder="Enter your address" type="text"></input>
</template>

<script>
  export default {
    created() {
      var autoplete = new google.maps.places.Autoplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autoplete')),
    {types: ['geocode']});
    }
  }
</script>

with error:

InvalidValueError: not an instance of HTMLInputElement

I am trying to implement Google Places Autoplete in Vue.js.

The API states that the Autoplete class first takes an inputField:HTMLInputElement, as used in their example:

autoplete = new google.maps.places.Autoplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autoplete')),
    {types: ['geocode']});

Since we cannot pass elements around by their ID's in Vue.js? How would this be achieved, and what kind of construct would we pass?

e.g. the following code fails

<template>
  <input id="autoplete" placeholder="Enter your address" type="text"></input>
</template>

<script>
  export default {
    created() {
      var autoplete = new google.maps.places.Autoplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autoplete')),
    {types: ['geocode']});
    }
  }
</script>

with error:

InvalidValueError: not an instance of HTMLInputElement

• javascript
• vue.js
• google-places-api

• Use ref – Mat J Commented Jan 17, 2017 at 4:57
• @MathewJibin thank you. – softcode Commented Jan 17, 2017 at 5:14
• I have followed your code.I m getting auto populated google auto plete.How to get the selected address, state and country from your code ? – Bhoomi Bhalani Commented Mar 27, 2018 at 5:21

2 Answers 2

Ok so following Matthew Jibin's suggestion to use ref, I got it to show up. Lots more to do but initial hurdle overe.

<template>
  <input ref="autoplete" 
         placeholder="Enter your address" 
         type="text"
  />
</template>

<script>
  export default {
    mounted() {
      var autoplete = new google.maps.places.Autoplete(
      /** @type {!HTMLInputElement} */(this.$refs.autoplete),
      {types: ['geocode']});
    }
  }
</script>

One addition, from the docs:

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet!

So the created() hook isn't the right one. mounted() is what we're looking for.

There are two ways to add google places auto plete.

• Using AutoComplete Widget
• Using AutoComplete Data APi

for custom dropdown search with places suggestion you can use the data api. also they have github code example, where you can convert the raw js code into vuejs code.