[Vue warn]: Error in mounted hook: "ReferenceError: google is not defined"

Question

I'm trying to implement Google autocomplete using this link:

https://www.npmjs.com/package/vue-google-autocomplete

But I'm getting this error:

VM2823 app.js:62045 [Vue warn]: Error in mounted hook:
"ReferenceError: google is not defined"
     
    found in
     
    ---> <VueGoogleAutocomplete> at node_modules/vue-google-autocomplete/src/VueGoogleAutocomplete.vue
           <user> at resources/js/components/addUser.vue
             <Root>

<template>
    <div>
        <h2>Your Address</h2> 
        <vue-google-autocomplete
            ref="address"
            id="map"
            classname="form-control"
            placeholder="Please type your address"
            v-on:placechanged="getAddressData"
            country="sg"
        >
        </vue-google-autocomplete>
    </div>
</template>
     
<script>
import VueGoogleAutocomplete from 'vue-google-autocomplete'
     
export default {
    components: { VueGoogleAutocomplete },
 
    data: function () {
        return {
            address: ''
        }
    },
     
    mounted() {   
        this.$refs.address.focus();
    },
     
    methods: {       
        getAddressData: function (addressData, placeResultData, id) {
            this.address = addressData;
        }
    }
}
</script>

Please help to sort out my issue.

From the description of the error, you're not importing some script which defines `google` in global space. Read the "Installation" section of the plugin carefully. I'm guessing you haven't placed the script importing Google Maps API in your `public/index.html`. You have to load that script before mounting the Vue component. If you need more help, please update the question with a [mcve]. — tao, Aug 24 '20 at 18:02
Or import it globally in `main.js`, no need for `Vue.use()` or registering it as a component — Daniel_Knights, Aug 24 '20 at 18:03
@tao: yes i have not included script with api, but where should i place that key, can u please provide some link for that — user3653474, Aug 24 '20 at 18:08
If you don't have a Maps api key, get one [here](https://developers.google.com/maps/documentation/javascript/get-api-key). If you have one, replace `YOUR_API_KEY_HERE` with your api key and either place a ` — tao, Aug 24 '20 at 18:14
@tao: I have an api key, in public index.html file i not there, can i create it — user3653474, Aug 24 '20 at 18:15
@tao `import VueGoogleAutocomplete from 'vue-google-autocomplete'` — Daniel_Knights, Aug 24 '20 at 18:17
@user, in that case, figure out how you Vue application gets rendered. `public/index.html` is the default for Vue 2+ apps created with `vue create some-project` — tao, Aug 24 '20 at 18:17
@Daniel_Knights, he's not missing the component. He's missing the API script. `google` is not defined. Please read [Installation](https://www.npmjs.com/package/vue-google-autocomplete#installation), The component requires it in `mounted`. Look at the error. It happens inside `` — tao, Aug 24 '20 at 18:18
@tao I understand the installation, I didn't see his comment — Daniel_Knights, Aug 24 '20 at 18:20
OP posted the body of the error. First snippet in their question. How do you know user is a guy? :D — tao, Aug 24 '20 at 18:21
@tao If he imported that into a local file then that error is still possible, it originates from the package itself. How do I know user is a guy? I don't, does it matter? They could be a fish for all I know, this is about coding. — Daniel_Knights, Aug 24 '20 at 18:45

[Vue warn]: Error in mounted hook: "ReferenceError: google is not defined"

0 Answers0