Uncaught (in promise) TypeError: Cannot read property 'Autocomplete' of undefined

[ghost]

Hi!

I'm getting the error: Uncaught (in promise) TypeError: Cannot read property 'Autocomplete' of undefined

I'm requiring the library for places but still seeing that error. Any ideas?

Cheers!

[prestanesia]

Make sure you include places in libraries.

  Vue.use(VueGoogleMaps, {
    load: {
      key: 'your-key',
      libraries: 'places',
    }
  })

[deevannaveed]

Recently I was getting the same error, I solved it by creating a computed property like below.

hasAutocomplete() {
    return typeof google.maps.places.Autocomplete !== 'function'
}

then apply an v-if condition on your Autocomplete component or its parent element.

 <div class="form-group" v-if="hasAutocomplete">
        <label for="autocomplete-place" class="d-block">Search Place on Map</label>
        <GmapAutocomplete
                ....
        >
        </GmapAutocomplete>
    </div>

[FeherMarcell]

If you have places in your libraries but still getting this error, the problem might be that Google changed the scope of the Maps API key. Previously it was enough to set the scope to 'Google Maps Javascript API', and you could use the key to access the Places API too. Now you have to enable the Places API manually:

1. Go to Google Cloud Console and select the project where your Maps API key belongs to
2. APIs & Services -> Credentials
3. Under API Keys find the Google Maps API Key and click on the edit button (pencil icon)
4. Scroll down to API restrictions and either select Don't restrict key or select BOTH Maps JavaScript API and Places API
5. Save and wait 5 minutes

[josegus]

If you have places in your libraries but still getting this error, the problem might be that Google changed the scope of the Maps API key. Previously it was enough to set the scope to 'Google Maps Javascript API', and you could use the key to access the Places API too. Now you have to enable the Places API manually:

1. Go to Google Cloud Console and select the project where your Maps API key belongs to
2. APIs & Services -> Credentials
3. Under API Keys find the Google Maps API Key and click on the edit button (pencil icon)
4. Scroll down to API restrictions and either select Don't restrict key or select BOTH Maps JavaScript API and Places API
5. Save and wait 5 minutes

I've got this strange issue, I have places enabled and autocomplete says it is undefined. I'm changing my apis as you said, we will see what happens..

[josegus]

Recently I was getting the same error, I solved it by creating a computed property like below.

hasAutocomplete() {
    return typeof google.maps.places.Autocomplete !== 'function'
}

then apply an v-if condition on your Autocomplete component or its parent element.

 <div class="form-group" v-if="hasAutocomplete">
        <label for="autocomplete-place" class="d-block">Search Place on Map</label>
        <GmapAutocomplete
                ....
        >
        </GmapAutocomplete>
    </div>

@diegoazh help please, @xkjyeah how you get access to google object?

[diegoazh]

@josegus you can check it here 👍🏽