Google Reference Error after installing vue-google-autocomplete

问题

I am using vue.js and Laravel 5.6.12

I am following this github page to install vue.js google autocomplete.

Below is the Step by Step guidelines I followed.

npm install vue-google-autocomplete --save

Then added below code in app.js

import VueGoogleAutocomplete from 'vue-google-autocomplete'
Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);

Finally below code in the template.

<vue-google-autocomplete
    id="map"
    classname="form-control"
    placeholder="Start typing">
</vue-google-autocomplete>

I got below error

Error in mounted hook: "ReferenceError: google is not defined"

Am I missing anything in above code?

回答1:

It seems like you have not added google maps script to your index.html.

This component (Vue Google Autocomplete) uses Google Maps Places API to get geo suggests for autocompletion, so you have to include the Google Maps Places API in the of your HTML:

<!DOCTYPE html>
  <html>
  <head>
    …
    <!-- NEXT LINE IS SUPER IMPORTANT -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
  </head>
  <body>
    …
  </body>
</html>

If you are using vue cli, you can add it to this file: https://github.com/vuejs-templates/webpack/blob/develop/template/index.html

BTW: You can find this script on example page as well view-source: https://olefirenko.github.io/vue-google-autocomplete/ (check source code of the page)

Follow these steps to get an API key:

Go to the Google API Console.
Create or select a project.
Click Continue to enable the API and any related services.
On the Credentials page, get an API key. Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.
From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key.
In the Key restriction section, select HTTP referrers (web sites), then follow the on-screen instructions to set referrers.
(Optional) Enable billing. See Usage Limits for more information.

More info about getting the API key here

来源：https://stackoverflow.com/questions/50647627/google-reference-error-after-installing-vue-google-autocomplete

标签

Vue.js

laravel-5.6