Google auto populate address without map in quasar vue issue

Question

I'm using quasar framework. And VueGmaps package for autopopulate adress, which i installed it using npm install vue-gmaps --save

<script>
  import Vue from "vue";
  import VueGmaps from 'vue-gmaps'
  mounted() {
     this.autocomplete = new google.maps.places.Autocomplete(
     (this.$refs.autocomplete),
     { 
       type: ['geocode'],
       componentRestrictions: { country: 'NZ' }
     }
  )
  this.autocomplete.addListener('changed_place',()=>{
    let place = this.autocomplete.getPlace()
    let ac = place.address_components
    let city = ac
    this.city = city
    this.cities.push(ac[0]['short_name'].concat(', ',ac[2]['short_name']))

    console.log(this.city);
  })
 },
  </script>

     <teamplate>
       <q-input              
          ref="autocomplete"              
          v-model="user.address"              
          filled              
          label="Physical Address"              
          hint="Your permanent address"              
          :rules="[val => !!val || 'This field is required.']"              
          />
     </template>

I’m getting error google is not defined in console. please check screenshot below

I want this to give suggestion of address when anyone types anything in the textfield & take the city, state, street from the address without displaying map.

can anyone help me with this please?

Thanks

Answer 1

I remove the the vue-google-autocomplete package.

I found out that i was giving reference instead of id, I guess google map api only work with id attribute.

Here is the solution that worked for me without using any packages it might help some one. <q-input ref=“autocomplete” filled v-model=“user.address” label=“Physical Address” for=“address” //id attribute hint=“Your permanent address” :rules="[val => !!val || ‘This field is required.’]" />

and in mounted

mounted() {
  this.autocomplete = new google.maps.places.Autocomplete(
   // (this.$refs.autocomplete),
    (document.getElementById(“address”)),
    {types: [‘geocode’]}
  );
 this.autocomplete.addListener(‘place_changed’, () => {
 let place = this.autocomplete.getPlace();
 let ac = place.address_components;
 console.log(ac);
 }
});