Style Vue2-Google-maps autocomplete like vuetify v-text-field - google-maps

Question

I'm wondering what the best way to style the gmap-autocomplete field like a vuetify v-text-field.
I've looked at Vuetify-google-autocomplete module but it's throwing lots of errors and being more or an issue than i expected.
Whats the easiest way to make
<gmap-autocomplete></gmap-autocomplete>
Look like
<v-text-field></v-text-field>
without changing functionality

Answer 1

I have implemented a google address autocomplete with vue and vuetify.
You need to use "v-autocomplete" instead of "v-text-field". Its a vuetify component too
I will share some code about my implementation with the basics (my component is more complex)
Keep in mind to put your APIKEY in the URL
Also, In my implementation, I have added debounce library for add some delay in the autocomplete, I can add the code with this feature if you wish
CODE:
<template>
<v-autocomplete
prepend-icon="account_box"
v-model="address"
:items="items"
name="address"
:search-input.sync="search"
label="Address"
placeholder="Address"
class="pa-3"
autocomplete="off"
:loading="loading"
:filter="d=>d"
color="secondary"
item-color="secondary"
return-object
#change="change"
></v-autocomplete>
</template>
<script>
export default {
data() {
return {
items: [],
search: null,
address: null
}
},
watch: {
search(){
//Optional: here you can add some delay
this.googleSearch()
}
},
methods: {
googleSearch() {
let url = 'https://maps.googleapis.com/maps/api/geocode/json?key={YOURAPIKEY}&address='
fetch(url + this.address)
.then((response) => {
return response.json()
})
.then(jsonResult => {
this.items = jsonResult.map(item => {
//You can explore and use other information inside "item" like latitude, longitude, country, City, zipCode
return {
text: item.formatted_address,
value: item.formatted_address
}
})
}).catch(err => {
//handle errors
console.log(err)
})
}
}
}
</script>

Answer 2

Try this one, worked for me:
https://www.npmjs.com/package/vuetify-google-autocomplete
npm i vuetify-google-autocomplete
I needed to bind "id" to something unique in order to have multiple instances of the field on the same page.

Answer 3

while not using the exact same thing I found out that I had to globally style the element to what I wanted it to be.
The below code is what I used:
<style global>
#vuetify-google-autocomplete-id {
border-top-width: 0px !important;
border-right-width: 0px !important;
border-bottom-width: 0px !important;
border-left-width: 0px !important;
}
</style>
I hope it can help anyone who is looking for a solution.