Feature request: allow Google Maps API script to be loaded asynchronously about vue-google-autocomplete HOT 4 OPEN

Hello @tinymachine

On my side I have this

main.js

let g = document.createElement('script') 
g.type = 'text/javascript' 
g.onload = function () { 
    vue.$store.commit('GOOGLE_API_LOADED')
} 
g.src = 'https://maps.googleapis.com/maps/api/js?key=' + ỲOUR_KEY + '&libraries=places' 
g.async = true 
document.body.appendChild(g) 

So as you can see i commit something to the store

this something is :

store.js

export const GOOGLE_API_LOADED = (state) => {
	state.googleApiLoaded = true
}

And then when i used vue-google-autocomplete :

<vue-google-autocomplete v-if="$store.state.googleApiLoaded" id="search">

It may not be the best solution, but it's working :) !

from vue-google-autocomplete.

Take a look at: https://stackoverflow.com/questions/1866717/document-createelementscript-adding-two-scripts-with-one-callback/1867135#1867135
You don't need to load it through your store.

from vue-google-autocomplete.

+1

Thanks for sharing links. Current solution is not fully safe since API key is exposed in HTML file..

Update: just figured out that it's exposed in source code on site anyways.

from vue-google-autocomplete.

You can take a look at : https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8 for more simple solutions.

Just change the url with google maps api url

from vue-google-autocomplete.